如何拉伸Flex 子元素以填充容器高度

使用Flexbox 時，經常會遇到子元素無法填充的問題不會拉伸到其容器的整個高度。這通常是由於 height: 100% 屬性的錯誤使用造成的。

在 Flexbox 中，height: 100% 屬性可能會出現問題，因為：

• 父元素需要固定height，這違反了 Flexbox 的原則。
• 當存在多個孩子時，對一個孩子使用 height: 100% 將忽略其他孩子。

解決方案是刪除height: 100% 屬性並依賴 Flexbox 的預設行為。預設情況下，行方向（典型佈局）上的彈性項目透過屬性align-items:stretch 垂直對齊。這意味著子元素將自動拉伸以填充容器的可用高度。

下面是一個示例，演示了沒有高度的正確用法：100%：

  

  

    some

    cool

    text
  

在此範例中，無論藍色子項的文字高度如何，黃色子項都會拉伸以填滿容器的高度。這是因為預設的align-items:stretch值確保Flex專案垂直拉伸以佔據可用空間。