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

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

Flex コンテナは、特に子要素を扱う場合、管理が難しい場合がありますスクロールバーがあるもの。 Firefox では、flex: 1 プロパティと overflow-y:scroll を持つ子 div は、親フレックスボックス コンテナの高さを超える傾向があります。この問題は、ブラウザが flex: 1 短縮表現を異なる方法で解釈するために発生します。

この問題を解決するには、flex: 1 を flex: 1 1 1px。この調整された値は、フレックスベース (最小の幅または高さ) を 1px に明示的に設定します。 overflow-y:scroll と組み合わせて使用​​すると、子 div が親の高さ制限を尊重し、必要に応じてスクロールバーを表示するようになります。

行うべき具体的なコード調整は次のとおりです。

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

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

これらの変更を適用すると、子 div は親コンテナ内の残りの垂直方向のスペースを埋めるように拡張されますが、親の高さを超えることはなくなります。コンテンツがオーバーフローするとスクロールバーが表示され、ユーザーは子 div が無限に大きくなることなくコンテンツを垂直方向にスクロールできます。

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