-1
<div>
   <div>
     hello1
   </div>
   <div>
     hello2
   </div>
</div>

I want the two inner div's to take/fill up the whole space of the outer div (height/vertically). But both inner div's should have the equal height

farahm
  • 1,326
  • 6
  • 32
  • 70
  • 3
    Take a look at Flexbox. This website should give you enough information to figure out how https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Bas van Dijk Sep 03 '18 at 15:57
  • 1
    Possible duplicate https://stackoverflow.com/questions/2114757/css-equal-height-columns – Pete Sep 03 '18 at 16:00
  • When they both take up the space, which child div should be in front of the other? – klewis Sep 03 '18 at 16:01

1 Answers1

1

You can use CSS' flexbox, see my example below:

.row {
    display: flex;
}

.col {
  border: 1px solid;
  flex: 1;
}
<div class="row">
   <div class="col">
     hello1
   </div>
   <div class="col">
     hello2<br>
     same height!
   </div>
</div>
fabrik
  • 14,094
  • 8
  • 55
  • 71