Warum läuft ein untergeordnetes Element mit „max-height: 100 %' über, wenn das übergeordnete Element eine „max-height' hat?

Unerwartetes Überlaufproblem mit maximaler Höhe: 100 %

Im angegebenen Beispiel ein untergeordnetes Element mit einer maximalen Höhe von 100 % überläuft den übergeordneten Container mit einer angegebenen maximalen Höhe. Dieses scheinbar unerwartete Verhalten wirft Fragen über die Natur der maximalen Höhe in einem solchen Szenario auf.

Der Kern des Problems liegt in der Berechnung der maximalen Höhe für das untergeordnete Element. Wenn die maximale Höhe als Prozentsatz festgelegt ist, wird sie als Prozentsatz der tatsächlichen Größe des übergeordneten Elements und nicht als dessen maximale Höhe interpretiert. Wenn für das übergeordnete Element keine explizite Höhe angegeben ist, ist die tatsächliche Größe des übergeordneten Elements undefiniert und daher ist die maximale Höhe des untergeordneten Elements standardmäßig auf „Keine“ festgelegt.

Da dem untergeordneten Element keine maximale Höhe auferlegt wird, ist dies frei in vollem Umfang seinen Inhalt entfalten. Bei einem Bild, dessen vertikales Seitenverhältnis typischerweise größer ist als sein horizontales Seitenverhältnis, läuft das Bild über die Höhe des Containers nach unten und behält dabei sein inhärentes Seitenverhältnis bei.

Die Lösung für dieses unerwartete Verhalten besteht darin, dies explizit zu tun Definieren Sie eine Höhe für das übergeordnete Element. Dadurch wird ein fester Höhenbezugspunkt für die Berechnung der maximalen Körpergröße des Kindes festgelegt. Dadurch wird sichergestellt, dass das Kind innerhalb der angegebenen Höhenbeschränkung bleibt und gleichzeitig sein Seitenverhältnis beibehält, wodurch ein Überlaufen verhindert wird.

Das obige ist der detaillierte Inhalt vonWarum läuft ein untergeordnetes Element mit „max-height: 100 %' über, wenn das übergeordnete Element eine „max-height' hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!