Warum überschreitet mein Flex-Kind in Firefox die Körpergröße des Elternteils, nicht jedoch in Chrome?

Verhindern, dass untergeordnete Flex-Elemente die übergeordnete Höhe überschreiten

Wenn ein Flex-Container ein untergeordnetes Element mit sowohl flex: 1 als auch overflow-y enthält: Beim Scrollen entsteht eine Diskrepanz zwischen Chrome und Firefox. In Chrome wird das untergeordnete Element erweitert, um den verbleibenden Platz auszufüllen, ohne die Höhe des übergeordneten Elements zu überschreiten, was zu sichtbaren Bildlaufleisten führt. In Firefox erhöht sich jedoch die Höhe des untergeordneten Elements und bricht aus dem übergeordneten Element aus.

Lösung

Um dieses Problem in Firefox zu beheben, ersetzen Sie flex: 1 durch flex: 1 1 1px. Dadurch wird eine feste Mindestbasis von 1 Pixel festgelegt, um sicherzustellen, dass das untergeordnete Element die Höhe des übergeordneten Elements auch bei einem Inhaltsüberlauf nicht überschreitet.

Überarbeiteter Code

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

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

Durch diese Änderung wird sichergestellt, dass die untergeordneten Elemente erweitert werden, um den verfügbaren Platz auszufüllen, während sie im Flex-Container enthalten bleiben. Sowohl in Chrome als auch in Firefox werden Bildlaufleisten angezeigt, die es Benutzern ermöglichen, Inhalte außerhalb des sichtbaren Bereichs anzuzeigen.

Das obige ist der detaillierte Inhalt vonWarum überschreitet mein Flex-Kind in Firefox die Körpergröße des Elternteils, nicht jedoch in Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!