Wie kann verhindert werden, dass Flex-Kinder mit Bildlaufleisten in Firefox die Elterngröße überschreiten?

Verhindern Sie mit Bildlaufleisten, dass ein flexibles Element die übergeordnete Höhe überschreitet

Problem: In Firefox ein flexibles untergeordnetes Element mit Bildlaufleisten überschreitet die Höhe des übergeordneten Flex-Containers, was zu einem Inhaltsüberlauf und dem Fehlen von Bildlaufleisten führt.

Lösung:

Ändern Sie die Flex-Eigenschaft der untergeordneten Elemente #messagelist und # Nachrichteninhalte wie folgt:

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

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

Erklärung:

Das Standardverhalten von Chrome besteht darin, einen Überlauf auszulösen und Bildlaufleisten zu generieren, wenn die Flex-Basis auf 0 gesetzt ist. Firefox und Edge erfordern jedoch eine festgelegte Höhe oder maximale Höhe, damit ein Überlauf auftritt.

Durch die Angabe einer festen Höhe von 1 Pixel für die Flex-Basis wird die Anforderung zum Erstellen eines Überlaufs erfüllt, auch wenn es sich um einen kleinen Wert handelt Bedingung und ermöglicht die Anzeige von Bildlaufleisten, wenn der Inhalt die Körpergröße des Kindes überschreitet.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass Flex-Kinder mit Bildlaufleisten in Firefox die Elterngröße überschreiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!