54

Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?

I set up a demo on jsbin that illustrates the problem. I'd like for all the children to be the size of their wrapped contents.

#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>
Adrift
  • 58,167
  • 12
  • 92
  • 90
verysuperfresh
  • 747
  • 1
  • 6
  • 10
  • It's more obvious if you look at the demo. With arbitrarily long content in the cells, the height of each cell is equal to the height of the tallest cell on its row. I want each cell to have a height equal to it's own contents, so when a long cell and a short cell share a row, the short cell doesn't have a large block of white space between it and the cell in the next row down – verysuperfresh Jan 07 '14 at 17:57

1 Answers1

68

This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:

http://cssdeck.com/labs/9s9rhrhl

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)

Community
  • 1
  • 1
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • 4
    Thank you. The problem with an explicit multi-column layout is that I don't think it's possible to order items such that the 2nd item is at the top of the 2nd column, rather than immediately below the 1st item in the 1st column. Regardless, it seems you're right and what I'm trying to do isn't possible in pure CSS. Thanks! – verysuperfresh Jan 07 '14 at 18:18
  • 7
    The comment about [Mansory](http://masonry.desandro.com/) also helped a lot! At least there is a library that already do the magic. :) – cregox May 19 '15 at 22:42