Warum funktioniert „Höhe: 100 %' in Flexbox-Spalten in Chrome nicht wie erwartet?

Höhenprobleme in Flexbox-Spalten: Eine Chrome-Eigenart

In Flexbox-Spalten kann es zu Schwierigkeiten kommen, wenn Sie Höhenprozentsätze zur Größenbestimmung untergeordneter Elemente verwenden. Dieses Problem ist auf eine Eigenart bei der Handhabung der Flexbox-Spezifikation durch Chrome zurückzuführen.

Betrachten Sie das folgende Beispiel:

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

.flexbox {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex {
  background: blue;
  flex: 1;
}

.flex-child {
  background: red;
  height: 100%;
  width: 100%;
  display: block;
}

.static {
  background: green;
  width: 100%;
  height: 5rem;
}

Sie würden erwarten, dass das rote .flex-child-Element das belegt gesamte Höhe seines blauen .flex-Elternteils. Allerdings funktioniert height:100% nicht wie vorgesehen.

Lösung:

Um dieses Problem zu beheben:

1. Ändern Sie .flex anzeigen: Flex.
2. Höhe:100 % entfernen von .flex-child.

Diese Anpassung stellt sicher, dass .flex-child den gesamten Raum in .flex ausfüllt.

Technischer Hintergrund:

In Flexbox bestimmt align-self:stretch (die Standardeinstellung) die Quergrößeneigenschaft (hier Höhe) eines gebogenen Elements. Prozentsätze verwenden jedoch den angegebenen Quergrößenwert und nicht den verwendeten Wert. In diesem Fall versucht .flex-child, 100 % der von .flex angegebenen Höhe einzunehmen, die standardmäßig automatisch ist. Dies verwirrt die Layout-Engine.

Das Festlegen von .flex auf display:flex löst das Problem, indem das Standardverhalten überschrieben wird und dem übergeordneten CSS ermöglicht wird, die Größe von .flex zu bestimmen.

Ausnahme:

Diese Lösung funktioniert nicht, wenn Sie .flex teilweise füllen möchten. Um dies zu erreichen, können Sie ein .spacer-Element in .flex mit flex:1 hinzufügen und flex-child auf flex:9 (und flex-direction:column in .flex) setzen. Dies ist jedoch ein Hack und es besteht die Hoffnung, dass zukünftige Browser-Updates diese Eigenart beheben.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „Höhe: 100 %' in Flexbox-Spalten in Chrome nicht wie erwartet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!