Flex アイテムが親の高さを超えないようにして、Firefox でスクロールバー機能を有効にする方法

フレックス項目が親の高さを超えないようにし、Firefox でスクロール バー機能を有効にする

特定のフレックスボックスに関して、Firefox は Chrome とは異なる動作をしますこのシナリオでは、子 div の高さが親の高さを超えます。この問題は、スクロールバーと flex:1 を持つ子 div が親フレックスボックス コンテナの高さを超えようとしたときに発生します。

短い回答

この問題を解決するには、次のようにします。 overflow-y:scroll を使用する子 div には、flex: 1 の代わりに flex: 1 1 1px を使用します。 CSS ルールのこの変更により、子 div の flex ベースが固定の高さに設定されるようになり、Firefox の問題が解決されます。

説明

ほとんどの場合、min を追加します。 -height: 0 を使用して列方向コンテナ内の項目を変更すると、問題が解決されます。ただし、この場合、問題は flex-basis にあります。

flex: 1 の短縮ルールは、flex-grow: 1、flex-shrink: 1、flex-basis: 0 の 3 つの部分に分かれます。デフォルトでは、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 の親フレックスボックス div と子フレックスボックス div の間の高さの不一致を解消し、ブラウザー間で一貫した動作を保証します。

以上がFlex アイテムが親の高さを超えないようにして、Firefox でスクロールバー機能を有効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。