## `flex: 1` を持つ Flex アイテムが Firefox では親の高さを超えるのに、Chrome では超えないのはなぜですか?

Flex 項目が親の高さと Firefox のスクロール バーの機能を超えるのを防ぐ

Firefox では、子 flexbox 項目が flex: 1 でオーバーフローしていることが観察されます。 y: スクロールが親フレックスボックスの高さを超える可能性があり、その結果、コンテンツがオーバーフローし、スクロールバーが表示されなくなります。逆に、Chrome では、子項目は残りの垂直スペースを正しく埋め、スクロールバーが表示され、親の高さを超えません。

解決策

この問題を解決するには、flex: 1 を flex に置き換えます。 : 子フレックスボックス項目の場合は 1 1 1px。これにより、flex-basis が 1px の固定値に設定され、スクロール オーバーフローが発生してスクロールバーが表示されるようになります。

説明

このような場合、min-height: 0 を設定する一般的な方法にもかかわらず、 、このシナリオでは不十分です。短縮ルール flex: 1 には flex-basis: 0 が含まれていますが、Firefox と Edge ではこれではオーバーフローをトリガーするには不十分です。

MDN によると、

オーバーフローが影響を与えるには、次のようになります。ブロックレベルのコンテナには、高さ (高さまたは最大高さ) が設定されているか、空白が nowrap に設定されている必要があります。

標準化された動作を確保し、オーバーフローを有効にするには、フレックス ベースの固定高さを設定します。 1px などの最小値

以上が## `flex: 1` を持つ Flex アイテムが Firefox では親の高さを超えるのに、Chrome では超えないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。