為什麼 Flex Child 上的「height: 100%」會破壞 Flexbox？

在沒有顯式父級高度的情況下拉伸Flex 子項以填充容器高度

在我們需要拉伸Flex 子項目以填滿整個容器的情況下高度，確保父級的高度取決於另一個子級的內容，在子層級上設定「height: 100%」可能會導致Flexbox 中出現意外行為。

為什麼使用「height: 100%」可以打破Flexbox

在Flexbox 中使用「height: 100%」時：

• 被拉伸的元素的父元素需要聲明高度，這違反了Flexbox 的預設行為。
• 如果拉伸元素上方或下方還有其他子元素，「height: 100%」會忽略它們的存在並導致衝突。

解決方案：刪除「 height: 100%"

要在不破壞Flexbox 的情況下實現所需的拉伸，只需從子元素中刪除“height: 100%”即可。

說明

在具有行方向（預設）的 Flexbox 中，「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 Child 上的「height: 100%」會破壞 Flexbox？的詳細內容。更多資訊請關注PHP中文網其他相關文章！