Wie kann verhindert werden, dass ein Flex-Element die übergeordnete Höhe überschreitet, und die Bildlaufleiste in Firefox aktiviert werden?

Verhindern, dass Flex-Elemente die übergeordnete Höhe überschreiten, und Aktivieren der Bildlaufleiste in Firefox

Flex-Container können schwierig zu verwalten sein, insbesondere wenn es um untergeordnete Elemente geht die Scrollbars haben. In Firefox neigt ein untergeordnetes Div mit der Eigenschaft flex: 1 und overflow-y: scroll dazu, die Höhe seines übergeordneten Flexbox-Containers zu überschreiten. Dieses Problem tritt auf, weil Browser die Abkürzung flex: 1 unterschiedlich interpretieren.

Um dieses Problem zu beheben, ersetzen Sie flex: 1 durch flex: 1 1 1px. Dieser angepasste Wert legt die Flex-Basis (die minimale Breite oder Höhe) explizit auf 1 Pixel fest. Bei Verwendung in Kombination mit overflow-y: scroll wird das untergeordnete Div dazu gezwungen, die Höhenbeschränkung des übergeordneten Elements zu respektieren und bei Bedarf Bildlaufleisten anzuzeigen.

Hier sind die spezifischen Codeanpassungen, die vorgenommen werden müssen:

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

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

Mit diesen Änderungen wird das untergeordnete Div erweitert, um den verbleibenden vertikalen Raum im übergeordneten Container auszufüllen, überschreitet jedoch nicht mehr die Höhe des übergeordneten Elements. Wenn der Inhalt überläuft, werden Bildlaufleisten angezeigt, die es Benutzern ermöglichen, vertikal durch den Inhalt zu scrollen, ohne dass das untergeordnete Div ins Unendliche wächst.

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