Evgenii Evgenii - 5 months ago 7
CSS Question

How to apply height 100% for a box based on parent

Html

<div class="row">
<div class="box">
<div class="one">
one
</div>
</div>
<div class="box">
<div class="two">
two
</div>
</div>
</div>


css

.box {
float: left;
width:calc(50% - 1px);
background: green;
margin-right:1px
}

.one {
height: 50px;
}

.two {
height: 100px;
}


I have rows, in each rows there are 2 boxes each box has different height based on content. I'd like to have the same height for each box based on content.

In an example above, I'd like to have height for the box with content 'one'
should has the same height as the box with content 'two'

https://jsfiddle.net/8m2q761t/

Answer

You can use flexbox for that (without box div):

.row {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;
  /* NEW, Spec - Firefox, Chrome, Opera */
}
.one,
.two {
  float: left;
  width: calc(50% - 1px);
  background: green;
  margin-right: 1px;
}

JSFIDDLE