Esta pregunta ya tiene una respuesta aquí:

Estoy tratando de crear un menú desplegable de categoría con algunas columnas dependiendo de la longitud del<ul>.

He creado un violín aquí.

Quiero colocar cada elemento del submenú debajo del anterior hasta que se alcance la altura del submenú. Si es así, entonces todo debe colocarse en una nueva columna.

Algo como esto:

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

Estoy usandoflex-flow y para lo que realmente funciona bien. Sin embargo, no puedo hacer que mi contenedor desplegable sea de ancho completo con un color de fondo.

Mi HTML se ve así:

    <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 es usar esto:

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

Entonces, ¿cómo puedo hacer.subnav para llenar el fondo tanto como sea necesario?