Warum funktioniert die prozentuale Höhe in Flexbox-Spalten nicht wie erwartet?

Probleme mit der prozentualen Höhe in Flexbox-Spalten

In Flexbox-Layouts ist es oft erwünscht, dass untergeordnete Elemente einer Flexbox-Spalte deren Höhe ausfüllen. Benutzer können jedoch auf Probleme stoßen, bei denen das Festlegen der Höhe auf Prozentsätze nicht das erwartete Ergebnis liefert.

Erklärung

Gemäß der Flexbox-Spezifikation die größenübergreifende Eigenschaft eines Elements (in diesem Fall Höhe) verwendet einen angegebenen Wert und einen verwendeten Wert. Prozentuale Höhen werden basierend auf der angegebenen Höhe des übergeordneten Elements berechnet, nicht auf der verwendeten Höhe.

Lösung

Um dieses Problem in Chrome zu beheben:

1. Stellen Sie den übergeordneten Container (.flex) auf die Anzeige ein: flex.
2. Entfernen Sie die Höhe: 100 %; Regel aus dem untergeordneten Element (.flex-child).

Beispiel:

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

.flex {
  background: blue;
  flex: 1;
  display: flex; /* Added */
}

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

Alternativer Ansatz für Teilfüllung

In Fällen, in denen nur ein Teil des übergeordneten Containers gefüllt werden soll, kann ein zusätzliches flexibles untergeordnetes Element (.spacer) hinzugefügt werden, um den verbleibenden Platz einzunehmen.

.flex-child {
  flex: 9;
}

.spacer {
  flex: 1;
}

Fazit

Durch das Verständnis des Unterschieds zwischen angegebenen und verwendeten Werten können Entwickler Probleme mit der prozentualen Höhe in Flexbox-Spalten überwinden. Obwohl in einigen Fällen eine browserspezifische Problemumgehung erforderlich sein kann, wird erwartet, dass diese Einschränkungen in Zukunft durch Spezifikationsaktualisierungen behoben werden.

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