Flexbox Overflow-Y-Problem mit verschachtelten Elementen in Firefox

In einem CSS-Layout mit Flexbox, in dem verschachtelte Elemente in einer übergeordneten Flexbox enthalten sind item, overflow-y funktioniert in Firefox möglicherweise nicht wie erwartet. Dieses Problem tritt insbesondere dann auf, wenn dem verschachtelten Element die Überlaufeigenschaft „auto“ zugewiesen wird.

Problemerklärung:

Flexbox-Elemente berechnen ihre Mindestgröße automatisch basierend auf der intrinsischen Größe Größe ihrer untergeordneten Elemente. Wenn jedoch untergeordnete Elemente mit angewendeten Überlaufeigenschaften vorhanden sind, wie z. B. overflow-y, behält das Flex-Element eine Mindestgröße bei, die dem Inhalt des untergeordneten Elements entspricht, auch wenn es den verfügbaren Platz überschreitet.

Lösung :

Um dieses Problem in Firefox zu beheben, ist es notwendig, die Min-Height-Eigenschaft des übergeordneten Flex-Elements explizit auf 0 zu setzen. Dadurch wird das standardmäßige Mindestgrößenverhalten deaktiviert und das Flex-Element kann verkleinert werden unterhalb der Mindestinhaltsgröße des untergeordneten Elements.

.parent-flex-item {
  min-height: 0;
}

Durch Anwenden dieses Fixes kann das verschachtelte Element mit overflow-y: auto nun verkleinert werden und eine Bildlaufleiste anzeigen, wenn sein Inhalt die verfügbare Höhe überschreitet.

Codebeispiel :

Bedenken Sie den folgenden HTML- und CSS-Code:

  

    
This is a long text that exceeds the available height.
  

.parent-flex-item {
  display: flex;
  flex-direction: column;
  height: 100px;
  min-height: 0;
}

.nested-element {
  overflow-y: auto;
}

Mit diesem Code verfügt das verschachtelte Element in Firefox über eine Bildlaufleiste, sodass Benutzer den übergelaufenen Inhalt anzeigen können.