Ширина flex блока по ширине контента

Question

.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, также есть блоки, которые не влезают в колонку, и флекс их размещает рядом. Как залить фоном все подпункты, а не только первую колонку?

Answer 1

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

Answer 2

.popup-menu {
  background: antiquewhite;
  width: max-content;
}

.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;
  background: antiquewhite;
  width: max-content;
}

.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>

БЛОГ НА HUSL

Ширина flex блока по ширине контента

Ответы (2 шт):