Сделать контейнер на всю ширину с помощью flex [duplicate]
На этот вопрос уже есть ответ здесь:
Когда элементы flexbox переносятся в режиме столбца, контейнер не увеличивается в ширину 3 ответаЯ пытаюсь создать выпадающее меню категории с несколькими столбцами в зависимости от длины<ul>
.
Я хочу разместить каждый элемент подменю под предыдущим, пока не будет достигнута высота подменю. Если так, то все должно быть помещено в новый столбец.
Что-то вроде этого:
Main category
|
subcategory1 subcategory3
|subsub1 for subcategroy1 |subsub1 for subcategroy3
|subsub2 for subcategroy1 |
| subcategory4
subcategory2 | etc...
|subsub1 for subcategroy2
|subsub2 for subcategroy2
--------------------------------------------------------------------
// total height of the dropdown
is reached here
я используюflex-flow
и для того, что на самом деле работает хорошо. Однако я не могу сделать так, чтобы мой выпадающий контейнер имел полную ширину и цвет фона.
Мой HTML выглядит так:
<div class="cats">
<ul>
<li class="item sub">
<a title="Baby" href="http://ministry.webshopapp.com/baby/" class="itemLink">Baby</a>
<div class="subnav">
<ul class="flex-wrap">
<li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
<li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
<li class="subitem"><a title="Apple Park" href="#" class="subitemLink">Apple Park</a></li>
<li class="subitem title"><a title="Borstvoeding" href="#" class="title">something</a></li>
<li class="subitem"><a title="ATTITUDE" href="#" class="subitemLink">ATTITUDE</a></li>
</ul>
</div>
</li>
</ul>
</div>
Как CSS это использовать:
.cats .subnav {
background: #fff none repeat scroll 0 0;
border: 1px solid #eee;
padding: 30px;
position: absolute;
text-align: left;
z-index: 99;
display:none;
}
.cats .item.sub:hover .subnav {
display: block;
}
.flex-wrap {
background: #fff none repeat scroll 0 0;
display: flex;
flex-flow: column wrap;
height: 200px;
}
.subnav .subitem {
background: #fff none repeat scroll 0 0;
line-height: 36px;
}
ТАК, как я могу сделать.subnav
заполнить фон как можно больше?