2

I want a flex container that does not have an explicit height set with all of its children having equal height. I can't quite figure out how to implement this.

I can get it to work if the flex container has a height set, but I want its height to be dynamic based on the children. Again, they should all be equal (and calculated based on the highest child). I don't want to have to rely on js to make this layout work.

Here's a fiddle for what I have so far: https://jsfiddle.net/fL1gk17L/1/

HTML

<div id="wrapper" class="wrapper">
  <div class="inner">Some text</div>
  <div class="inner">Some text</div>
  <div class="inner">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    Some text Some text </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.inner {
  outline: 1px solid black;
  flex-grow: 1;
  flex-basis: 0;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
jas7457
  • 1,712
  • 13
  • 21
  • 2
    An equal height rows feature is [**not possible with flexbox**](https://stackoverflow.com/q/36004926/3597276), but [**it is possible in CSS Grid**](https://stackoverflow.com/q/44488357/3597276). – Michael Benjamin Nov 16 '17 at 02:30

1 Answers1

0

Try set display:flex;flex-wrap:wrap for parent div and set display:flex for child column. You achieve this without using column height.

.wrapper {
  display: flex;
  flex-wrap:wrap;
}

.inner {
  outline: 1px solid black;
  flex-grow: 1;
  flex-basis: 0;
  display:flex;
}
<div id="wrapper" class="wrapper">
  <div class="inner">Some text</div>
  <div class="inner">Some text</div>
  <div class="inner">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
    Some text Some text </div>
</div>
Saravana
  • 3,389
  • 4
  • 21
  • 37
  • 1
    That's not what it's asked.the wrapper must have a flex-direction: column, you just use the basic feature of flexbox. – Nina Sep 12 '19 at 09:55