コンテナの高さを満たすように Flex の子を引き伸ばす方法

Flexbox を使用する場合、子要素がコンテナの高さいっぱいまで伸びません。これは、高さ: 100% プロパティの誤った使用が原因であることがよくあります。

フレックスボックスでは、高さ: 100% プロパティは次の理由で問題になる可能性があります:

• 親要素には修正が必要ですこれは Flexbox の原則に反します。
• 複数の子が存在する場合、1 つの子に height: 100% を使用すると、他の子は無視されます。

解決策は、 height: 100% プロパティであり、Flexbox のデフォルトの動作に依存します。デフォルトでは、行方向の flex アイテム (一般的なレイアウト) は、プロパティ align-items:stretch を使用して垂直方向に整列します。これは、子要素がコンテナの利用可能な高さを満たすように自動的に引き伸ばされることを意味します。

高さを指定しない正しい使用法を示す例は次のとおりです: 100%:

  

  

    some

    cool

    text
  

この例では、青い子のテキストの高さに関係なく、黄色の子がコンテナの高さを満たすように引き伸ばされます。これは、デフォルトの align-items:stretch 値により、flex 項目が垂直方向に引き伸ばされて利用可能なスペースを占有することが保証されるためです。