如何防止 Flex 專案超出父級高度並在 Firefox 中啟用捲軸功能？

在Firefox 中防止Flex 項目超出父級高度並啟用滾動條功能

當涉及到特定Flexbox 時，Firefox 的行為與Chrome 不同場景，導致子div 的高度超過父級的高度。當帶有捲軸和 flex:1 的子 div 嘗試超過其父 Flexbox 容器的高度時，就會出現此問題。

簡短回答

要解決此問題，對於具有overflow-y：滾動的子div，使用flex：1 1 1px而不是flex：1。 CSS 規則中的此變更可確保子 div 的 Flex 基礎設定為固定高度，從而解決了 Firefox 中的問題。

說明

最常見的是，加上 min -height: 0 在列方向容器中彎曲項目解決了這個問題。然而，在這種情況下，挑戰在於 flex-basis。

flex: 1 速記規則分為三個部分：flex-grow: 1、flex-shrink: 1 和flex-basis: 0預設情況下，flex-basis 設定為0，這不足以在Firefox和Edge 瀏覽器中觸發溢位條件。

為了遵守標準化，請給 flex-basis 一個固定的高度（即使它只是1 像素）。這樣做會導致溢出，產生捲軸並防止子 div 超過父級的高度。

以下是程式碼調整：

<code class="css">#messagelist {
    flex: 1 1 1px; /* new */
}

#messagecontents {
    flex: 1 1 1px; /* new */
}</code>

採用此解決方案將幫助您克服Firefox 中父子 Flexbox div 之間的高度差異，確保跨瀏覽器的行為一致。

以上是如何防止 Flex 專案超出父級高度並在 Firefox 中啟用捲軸功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！