Höhe eines Geschwisters nur mit CSS ausgleichen?

Question

Gibt es eine Möglichkeit, ein div auf die gleiche Höhe wie ein Geschwister nur mit CSS, oder ist dies nur mit Javascript möglich?

In dem Beispiel habe ich zwei Divs in einem Wrapper div, und ich möchte, dass die auf der linken Seite die gleiche Größe wie die auf der rechten Seite ist.

Der Code ist unten.

#wrapper {width: 50%; height; 200px;} 
 
#box1 {background: red;} 
 
#box2 {background: blue; height: 100px;} 
 
.box {float: left; color: white; width: 50%;}

<div id="wrapper"> 
 
    <div class="box" id="box1">Box 1</div> 
 
    <div class="box" id="box2">Box 2</div> 
 
</div>

Answer 1

Sie display: flex auf dem Wrapper verwenden können (dies funktioniert, weil align-items Eigenschaft stretch Standardeinstellung) - siehe Demo unter:

#wrapper {display: flex;width: 50%; height; 200px;} 
 
#box1 {background: red;} 
 
#box2 {background: blue; height: 100px;} 
 
.box {float: left; color: white; width: 50%;}

<div id="wrapper"> 
 
    <div class="box" id="box1">Box 1</div> 
 
    <div class="box" id="box2">Box 2</div> 
 
</div>