Firefox のスクロールバーで Flex の子が親の高さを超えないようにする方法

スクロールバーのあるフレックス項目が親の高さを超えないようにする

問題: Firefox では、スクロールバーのあるフレックス子項目親フレックス コンテナの高さを超えているため、コンテンツがオーバーフローし、スクロールバーが表示されなくなります。

解決策:

子アイテム #messagelist および # の flex プロパティを変更します。メッセージの内容は次のとおりです:

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

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

説明:

Chrome のデフォルトの動作は、フレックスベースが 0 に設定されている場合にオーバーフローをトリガーし、スクロールバーを生成することです。 Firefox および Edgeただし、オーバーフローが発生するには、設定された高さまたは最大高さが必要です。

フレックスベースに 1px の固定高さを指定すると、たとえ小さい値であっても、オーバーフローを作成するための要件が​​満たされます。条件を設定し、コンテンツが子の高さを超えたときにスクロールバーを表示できるようにします。

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