2

.header {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #382c1e;
}

.header .main-menu {
    position: relative;
    max-width: 991px;
    width: 100%;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .main-menu a {
    text-decoration: none;
}

.header .main-menu > li > a {
    color: #b89063;
}

.popup-menu {
    position: absolute;
    top: 34px;
  left: 0;
  list-style: none;
    background: #fff;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: .5rem 0;
  max-height: 100px;
  align-content: flex-start;
  align-items: flex-start;
}

.popup-menu > li {
  padding: .4rem 1.5rem;
}

.popup-menu > li > a {
  font-size: 1.1rem;
  line-height: 22px;
  color: #fc6a20;
}
<header>
        <div class="header">
            <ul class="main-menu">
                <li>
                    <a href="#">О компании</a>
                </li>
                <li>
                    <a href="#">Продукция</a>
                    <ul class="popup-menu">
                        <li>
                            <a href="#">Фильтры для очистных сооружений</a>
                        </li>
                        <li>
                            <a href="#">Фильтры для насосных станций</a>
                        </li>
                        <li>
                            <a href="#">Баки и контейнеры</a>
                        </li>
                        <li>
                            <a href="#">Корзины и решетки</a>
                        </li>
                        <li>
                            <a href="#">Прочее оборудование</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Сертификаты</a>
                </li>
                <li>
                    <a href="#">Контакты</a>
                </li>
            </ul>
        </div>
    </header>

Есть всплывающее подменю .popup-menu, также есть блоки, которые не влезают в колонку, и флекс их размещает рядом. Как залить фоном все подпункты, а не только первую колонку?

2
  • Суть флекс элементов - не вылезать за пределы родителя... И у тебя "контент" имеет position: absolute;, т.е. он не находится в "обычном контексте документа". Он даже может позиционироваться не от более "верхнего" родителя. А ты хочешь чтобы он начал кого-то "растягивать".
    – ksa
    12 мар в 18:43
  • Добавьте к "popup-menu - right: 0". 13 мар в 5:24

1 ответ 1

0

Добавьте для .popup-menu минимальную ширину min-width: 100%

1
  • так только по родителю растянется
    – rutruyokko
    29 сен 2020 в 12:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.