フレックスカラムの等しい高さのフレックスアイテム

Question

私はそれをリストの中の同じ高さのカラムのリストアイテムにするようにしています。ここで

は私が持っているものです。

<ol> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ol> 

ol { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

ol li { 
    flex: 1; 
} 

私が試してみました：無駄にhttps://css-tricks.com/boxes-fill-height-dont-squish/：私は、このチュートリアルに従うことを試みてきました。私は問題がの高さを設定しなければならないと思う：すべての単一の親要素にhtmlのまで100％。それは正しいことができますか？

私のリストは深くネストされていて、それらの高さをすべて設定するとレイアウトが壊れます。私は流体の高さでのみ作業することを好むでしょう。

私も試したことがあります：リストの代わりにdivだけでこれを達成しました。それでも、運がない。

手がかりはありますか？

Answer 1

あなたはフレックスコンテナの割合の高さを使用しているので...

ol { min-height: 100%; } 

...あなたはにもdefine a height for the parent and root elements必要です。

HTML（変更なし）

<ol> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li>List item 3</li> 
</ol> 

CSS

html, body { height: 90%; } /* NEW; needed for child percentage heights to work; 
           set at 90% just for demo purposes */ 
ol { 
    min-height: 100%; 
    display: flex; 
    flex-direction: column; 
} 

ol li { 
    flex: 1; 
} 

DEMO：http://jsfiddle.net/kzL4305k/1/

私はトラブルは0を設定することでを行うには持っていると思いますすべての へのの単一の親要素htmlへのすべての方法。それは正しいことができますか？

はい、正しいです。パーセンテージの高さを使用する場合は、すべての単一の親の高さをルート要素まですべて指定する必要があります（html）。

• Working with the CSS height property and percentage values

マイリストが深くネストされ、すべてのそれらの高さを設定すること レイアウトを壊す：私はここでその理由を説明してきました。私は流体の高さでのみ作業することを好むでしょう。

パーセントを使用しない場合は、親要素の高さを設定する必要はありません。フレックスコンテナのピクセル単位でmin-heightを使用し、フレックスアイテムの高さの問題をflex-grow: 1が処理するようにしてください。

Answer 2

ちょうど

ol { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: stretch; 
    -webkit-align-items: stretch; 
    -ms-flex-align: stretch; 
    align-items: stretch; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
ol li { 
    background: gold; 
    padding: 5px 5px; 
    margin: 5px 5px; 
    width: 25% 
}