Wie kann verhindert werden, dass Flex-Elemente die übergeordnete Höhe überschreiten, und die Scrollbar-Funktionalität in Firefox aktiviert werden?

Verhindern Sie, dass Flex-Elemente die übergeordnete Höhe überschreiten, und aktivieren Sie die Bildlaufleistenfunktion in Firefox

Firefox verhält sich anders als Chrome, wenn es um eine bestimmte Flexbox geht Szenario, das dazu führt, dass die Größe des untergeordneten Divs die Größe des übergeordneten Divs überschreitet. Dieses Problem tritt auf, wenn ein untergeordnetes Div mit einer Bildlaufleiste und flex:1 versucht, die Höhe seines übergeordneten Flexbox-Containers zu überschreiten.

Kurze Antwort

Um dieses Problem zu beheben, Verwenden Sie „flex: 1 1 1px“ anstelle von „flex: 1“ für die untergeordneten Divs mit „overflow-y: scroll“. Diese Änderung in der CSS-Regel stellt sicher, dass die Flex-Basis des untergeordneten Divs auf eine feste Höhe eingestellt ist, wodurch das Problem in Firefox behoben wird.

Erklärung

Am häufigsten wird das Hinzufügen von min -height: 0 zum Flexen von Elementen in einem Container in Spaltenrichtung löst das Problem. In diesem Fall liegt die Herausforderung jedoch in der Flex-Basis.

Die Kurzschriftregel „Flex: 1“ gliedert sich in drei Teile: Flex-Grow: 1, Flex-Shrink: 1 und Flex-Basis: 0 . Standardmäßig ist „flex-basis“ auf 0 gesetzt, was nicht ausreicht, um in Firefox- und Edge-Browsern einen Überlaufzustand auszulösen.

Um die Standardisierung einzuhalten, geben Sie „flex-basis“ eine feste Höhe (auch wenn dies nur der Fall ist). 1px). Dadurch kann es zu einem Überlauf kommen, der Bildlaufleisten generiert und verhindert, dass das untergeordnete Div die Höhe des übergeordneten Elements überschreitet.

Hier sind die Codeanpassungen:

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

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

Die Übernahme dieser Lösung wird Ihnen helfen, das zu überwinden Höhenunterschied zwischen den übergeordneten und untergeordneten Flexbox-Divs in Firefox, um ein konsistentes Verhalten in allen Browsern sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Flex-Elemente die übergeordnete Höhe überschreiten, und die Scrollbar-Funktionalität in Firefox aktiviert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!