フレックスボックスで 'height：100％'と 'align-items：stretch'を使用

Question

align-items: stretchと宣言された直接の子供を持つフレックスボックスがあります。

このフレックスボックスの直接の子供の中で、私はdivのコンテナを持っていて、その親のフルハイトを使っています（height: 100%を設定します）。

しかし、flexboxの直接の子にheight: 100%を設定しない限り、divコンテナは親の100％の高さに伸びません。

これはバグですか？フレックスボックスの子供をalign-items: stretchとheight: 100%に設定して、私が望むことを達成する必要がありますか？私には重複しているようです。ここで

は一例です：

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.flexbox { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 

 
.flexbox-child { 
 
    // height: 100%; uncommenting this will get it to work 
 
    align-items: stretch; 
 
    background-color: blue; 
 
} 
 

 
.flexbox-grand-child { 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div class="flexbox"> 
 
    <div class="flexbox-child"> 
 
    <div class="flexbox-grand-child"> 
 
     I want to be stretched till the bottom 
 
    </div> 
 
    </div> 
 
</div>

http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview

ありがとう！

Answer 1

複雑なケースです。

.flexbox-childはフレックスアイテムのみですが、フレックスコンテナではありません。したがって、フレックスコンテナにのみ適用されるalign-items: stretchは無視されます。

パーセンテージは 生成ボックスの包含ブロックの高さに対して計算される。

そして、.flexbox-grand-childこのように振る舞うパーセンテージheightを有しています。 ブロックの高さが明示的に指定されていない場合（つまり、内容が の高さに依存する）、この要素が絶対的に配置されていない場合、値 は 'auto'と計算されます。

これは、フレックスアイテム（.flexbox-child）です。これは明示的な高さがなく、その高さはコンテンツによって異なるようです。

ただし、この依存関係は新しいmin-height: autoが原因です。しかし、min-heightを考慮する前に、フレックスアイテムの高さは、（最初​​のalign-self: stretchのために）明示的に指定されたコンテナの高さを無視します。

Firefoxは、.flexbox-childの高さはその内容に依存しないと考えているので、子供の中のheightの割合が機能するはずです。そしてあなたのコードは動作します。

しかし、Chromeではそうは思わない。

どちらが正しいかわかりません。 heightは、矛盾したドラフトである古いCSS2.1とCSSの基本ボックスモデルでのみ定義されています。

.flexbox-childの高さを明示的に設定すると安全です。または、フレックスコンテナにします。

Answer 2

フレックスコンテナを作成すると、子要素のみがフレックスアイテムになります。子ども以外の子孫はフレックスアイテムにならず、フレックスプロパティはそれらには適用されません。

フレックスアイテムにdisplay: flexを適用するだけでフレックスアイテムに変換されます。 align-items: stretchのようなデフォルトのフレックスプロパティは、子に適用されます（フレックスアイテムになります）。

あなたが書いた：

私も親のフル 高さを使用するのdivコンテナがしたい

...あなたはheight: 100%を使用するかalign-items: stretchを追加する必要はありません

（それはデフォルトルールです）。 display: flexを.flexbox-childに追加するだけで、.flexbox-grand-childは利用可能な全高を拡張します。

修正デモ：http://plnkr.co/edit/n0Wt3x3CUr1ZfBD2RrGo?p=preview

---

再：height: 100% possible bug

子要素にheight: 100%を指定する必要に関しては、私はここにどんなバグが表示されません。すべてがspecに準拠しているようです。ここに完全な説明があります：Working with the CSS height property and percentage values