Ensemble flexbox les enfants à avoir des hauteurs différentes pour l'utilisation de l'espace disponible

À l'aide de deux colonnes flexbox mise en page, comment taille les enfants être fait pour combler tout l'espace disponible, à la place de tous les enfants ayant de la hauteur de la plus haute enfant de la ligne?

J'ai mis en place une démo sur jsbin qui illustre bien le problème. J'aimerais que tous les enfants soient la taille de leur enveloppé contenu.

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>
  • C'est plus évident si vous regardez la démo. Avec arbitrairement longues de contenu dans les cellules, la hauteur de chaque cellule est égale à la hauteur de la plus haute de la cellule sur sa ligne. Je veux que chaque cellule pour avoir une hauteur égale à son propre contenu, de sorte que lorsqu'une cellule et un court de cellules de partager une ligne, le court de la cellule ne dispose pas d'un gros bloc d'espace blanc entre elle et la cellule dans la prochaine ligne