Warum funktioniert „overflow-y“ nicht mit verschachtelter Flexbox in Firefox?

Firefox overflow-y funktioniert nicht mit verschachtelter Flexbox

In CSS3-Flexbox tritt in Firefox ein Problem auf, wenn overflow-y auf a angewendet wird verschachteltes Flexelement. Dies verhindert, dass das Flex-Element vertikal scrollt, wie in diesem CodePen zu sehen ist: http://codepen.io/anon/pen/NPYVga.

Detaillierte Erklärung:

Standardmäßig legen Flex-Elemente eine Mindestgröße fest, die auf der intrinsischen Größe ihrer untergeordneten Elemente basiert. Wenn ein Element mit Überlauf: [hidden|scroll|auto] in einem Flex-Element enthalten ist, weigert sich das Flex-Element konsequent, kleiner zu werden als die minimale Inhaltsgröße des untergeordneten Elements.

Lösung:

Um dieses Problem zu beheben, weisen Sie dem Ancestor-Flex-Element min-height:0 zu (.level-0-row2 im bereitgestellten Code). Dadurch wird das standardmäßige Mindestgrößenverhalten deaktiviert, sodass das Flex-Element nach Bedarf verkleinert werden kann.

Hier ist ein korrigierter Codepen mit dem Fix:

CSS:

.level-0-row2 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid black;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 0;
}

Hinweis:

Chrome erzwingt dieses standardmäßige Mindestgrößenverhalten derzeit nicht, kann jedoch in bestimmten Situationen fälschlicherweise die Mindestgrößen auf 0 reduzieren.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „overflow-y“ nicht mit verschachtelter Flexbox in Firefox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!