divを垂直グリッドで同じ高さにするCSSのみのソリューションはありますか？

Question

私は.parent divを持っており、その中にがありません。の数字が.child divsです。私は子divsが垂直グリッドにある必要があり、それらのすべてが等しい高さである必要があります。残念ながら、私はこれにjavascriptを使用することはできません。

私はdisplay: inline-blockとfloat: leftの異なる組み合わせを試しましたが、子供の高さを同じにすることはできません。

私はdisplay: table-cellを使って同じ高さを達成することができますが、次に合計幅がコンテナの幅を超えた場合、子供が複数の行に分割されないという別の問題が発生します。

純粋なCSSでこれを行う方法はありますか？私はIE10 +をサポートする必要があるだけです（フレックスボックス？）

Answer 1

あなたが使用することができます包むflexbox - 高さを自動調整ウィンドウのサイズを変更すると、子のdivをラップしたときに（原因デフォルトでalign-items:stretchプロパティに）どのように参照してください。

* { 
 
    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>

Answer 2

ビューポートユニットを試してみることができます。このような

何かがうまくいくかもしれない：

.child { 
    height: 1vw; 
} 

これは、子要素は、ビューポートの幅の1/100持つようになります。

To read more about viewport units

Viewport units support

Answer 3

はいあなたはフレキシボックスを使用することができます。

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