Set flexbox children to have different heights to use up available space

Question

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

Cells with arbitrarily long content.

```

Accepted Answer

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)

Set flexbox children to have different heights to use up available space

Solution

Problem