Behälter mit flex [duplizieren] auf volle Breite bringen

Question

Jul 05, 2016, 01:41 PM

Behälter mit flex [duplizieren] auf volle Breite bringen

Diese Frage hat hier bereits eine Antwort:

Wenn Flexbox-Elemente im Spaltenmodus umgebrochen werden, vergrößert der Container seine Breite nicht 3 answers

Ich versuche, ein Kategorie-Dropdown-Menü mit einigen Spalten abhängig von der Länge des @ zu erstelle<ul>.

Ich möchte jedes Untermenüelement unter dem vorherigen platzieren, bis die Höhe des Untermenüs erreicht ist. Wenn ja, sollte alles in einer neuen Spalte platziert werden.

Etwas wie das

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

Ich benutzeflex-flow und für das was eigentlich gut funktioniert. Allerdings kann ich meinen Dropdown-Container nicht so einstellen, dass er eine Hintergrundfarbe in voller Breite hat.

Mein HTML sieht so aus:

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

Als CSS wird folgendes verwendet:

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

SO wie kann ich @ mach.subnav um den Hintergrund so oft wie nötig auszufüllen?