Faça a largura total do contêiner com flex [duplicado]
Esta pergunta já tem uma resposta aqui:
Quando os itens do flexbox são agrupados no modo de coluna, o contêiner não aumenta sua largura 3 respostasEstou tentando criar um menu suspenso de categoria com algumas colunas, dependendo do tamanho do<ul>
.
Quero colocar cada item do submenu abaixo do anterior até que a altura do submenu seja atingida. Nesse caso, tudo deve ser colocado em uma nova coluna.
Algo assim:
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
estou a usarflex-flow
e para aquilo que realmente funciona bem. No entanto, não posso fazer com que meu contêiner suspenso tenha largura total e cor de fundo.
Meu HTML fica assim:
<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>
Como CSS, use isto:
.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;
}
Então, como posso fazer.subnav
preencher o plano de fundo para o quanto for necessário?