如何在不設定父級高度的情況下拉伸 Flex 子級以填滿父級的高度？

拉伸Flex 子項以填充容器高度而不設定父級高度

當嘗試拉伸黃色Flex 子項以填充其整個高度時父容器，避免設定父容器高度至關重要。相反，父級高度應根據藍色子級的內容動態調整。

使用 Flexbox 時的一個常見陷阱是過度使用高度：100%。雖然這在其他情況下通常是必要的，但它可能會破壞 Flexbox 佈局。

原因1：父級高度依賴

當使用height: 100% 時，被拉伸的元素還需要定義的高度，而Flexbox 在大多數情況下不需要。這可能會導致意外的行為。

原因2：忽略同級元素

如果Flex 子級在其上方或下方有同級元素，則使用height: 100% 將忽略它們的存在，可能會導致佈局問題。

解決方案：刪除高度：100%

解決方案很簡單：從黃色 Flex 子項中刪除高度：100%。這允許 Flexbox 的預設行為接管。

預設 Flexbox 行為

對於水平行排列的 Flex 項目（預設），align-items 控制它們垂直對齊。預設情況下，它設定為拉伸，它會自動填充容器的高度。

程式碼範例

<code class="html"><div style='display: flex'>
  <div style='background-color: yellow; width: 20px'></div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div></code>

以上是如何在不設定父級高度的情況下拉伸 Flex 子級以填滿父級的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！