兄弟の高さをCSSでのみ均等化しますか？

Question

divをCSSだけで兄弟と同じ高さにする方法はありますか、これはjavascriptでしか達成できませんか？

この例では、私はラッパーdivに2つのdivを持っており、左側のものは右側のものと同じサイズにしたいと思います。

コードは以下のとおりです。

#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

あなたは（align-itemsプロパティがデフォルトでstretchあるので、これは動作します）ラッパーにdisplay: flexを使用することができます - デモ下記参照：

#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>