為什麼 Overflow-Y 在有巢狀 Flexbox 元素的 Firefox 中無法如預期運作？

Firefox 中嵌套元素的Flexbox Overflow-Y 問題

在使用Flexbox 的CSS 佈局中，其中嵌套元素包含在父父Flexbox 中item、overflow-y 可能無法在Firefox 中如預期運作。當嵌套元素被賦予 auto 的 Overflow-y 屬性時，就會特別出現此問題。

問題說明：

Flexbox 項目會根據內在元素自動計算其最小大小他們的子元素的大小。但是，當存在應用了溢出屬性的子元素（例如overflow-y）時，Flex專案將保持與子元素內容相同的最小大小，即使它超出了可用空間。

解決方案:

要在 Firefox 中解決此問題，需要將父 Flex 專案的 min-height 屬性明確設為 0。這將停用預設的最小大小調整行為並允許 Flex 項目縮小低於子層級的最小內容大小。

<code class="css">.parent-flex-item {
  min-height: 0;
}</code>

透過應用此修復，帶有 Overflow-y: auto 的巢狀元素現在能夠在其內容超出可用高度時縮小並顯示捲軸。

程式碼範例：

考慮以下HTML 和CSS 程式碼：

<code class="html"><div class="parent-flex-item">
  <div class="nested-element">
    <p>This is a long text that exceeds the available height.</p>
  </div>
</div></code>

<code class="css">.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}</code>

使用此程式碼，巢狀元素將具有Firefox中的滾動條，允許用戶查看溢出的內容。

以上是為什麼 Overflow-Y 在有巢狀 Flexbox 元素的 Firefox 中無法如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！