Skip to content Skip to sidebar Skip to footer

Equal Heights In Flex-direction Column Without Setting Height

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

Solution 1:

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;
}
<divid="wrapper"class="wrapper"><divclass="inner">Some text</div><divclass="inner">Some text</div><divclass="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>

Post a Comment for "Equal Heights In Flex-direction Column Without Setting Height"