如何在 Firefox 中使用捲軸防止 Flex 子項目超過父項高度？

使用捲軸防止Flex 項目超出父項高度

問題： 在Firefox 中，帶有滾動條的Flex 子項目超過其父flex容器的高度，導致內容溢出，沒有捲軸。

解決方案：

修改子項的flex屬性#messagelist和#訊息內容如下：

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

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

說明：說明：

Chrome 的預設行為是在flex-basis 設定為0 時觸發溢出並產生捲軸。 Firefox 和 Edge但是，需要設定一個高度或 max-height 才會發生溢位。

透過為 flex-basis 指定固定高度 1px，即使它是一個很小的值，也滿足了創建溢出的要求條件，並在內容超過孩子的高度時啟用滾動條。

以上是如何在 Firefox 中使用捲軸防止 Flex 子項目超過父項高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！