Is there a CSS-only solution to make divs equal height in a vertical grid?

Question

I have a div .parentand inside it there is an unknown number of .childdivs. I need the child divs to be in a vertical grid, and they should all be equal in height. Unfortunately, I cannot use javascript for this.

I tried different combinations display: inline-blockand float: left, but I can not get the children to be the same height.

I can achieve the same height using display: table-cell, but then I came across another problem that children do not break into multiple lines if the total width exceeds the width of the container.

Is there any way to do this with pure css? I need to support IE10 + if this helps (flexbox?)

Answer 1

You can use wrapping flexboxto see how the height is automatically adjusted (due to the property align-items:stretch, which is the default), when child divs wrap when the window is resized.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
}
.wrapper > div {
  border: 1px solid red;
}

<div class="wrapper">
  <div>
    some text here some text here
  </div>

  <div>
    some text here
    <br/>more text here
  </div>

  <div>
    some text here
    <br/>more text here and some more and some more
  </div>

  <div>
    some text here
    <br/>more text here
    <br/>more text here
  </div>

</div>

Run codeHide result

Answer 2

Yes, you can use flexbox.

.parent{
    display: flex;
}
.child{
    flex:1;
}

Answer 3

.

- :

.child {
    height: 1vw;
}

, 1/100 .