Warum überläuft mein untergeordnetes Element sein übergeordnetes Element, obwohl beide „max-height: 100 %' haben?

Kind überfülltes übergeordnetes Element trotz maximaler Höhe von 100 %

Stellen Sie sich eine Situation vor, in der Sie ein untergeordnetes Element mit einer maximalen Höhe von 100 % in einem Container haben, der ebenfalls vorhanden ist nutzt maximale Höhe. Unerwarteterweise überläuft das untergeordnete Element das übergeordnete Element.

Verstehen des Verhaltens

Das Problem ergibt sich aus der Tatsache, dass, wenn Sie einen Prozentsatz für die maximale Höhe auf a definieren Unter „Kind“ bezieht es sich auf einen Prozentsatz der tatsächlichen Größe des Elternteils, nicht auf seine maximale Größe. Wenn also für das übergeordnete Element keine explizite Höhe festgelegt ist, gibt es keine definierte Basishöhe für die Berechnung der maximalen Höhe des untergeordneten Elements. Folglich ist max-height standardmäßig auf „none“ eingestellt, sodass das untergeordnete Element unbegrenzt wachsen kann.

In diesem Fall ist die einzige Einschränkung für das untergeordnete Element die maximale Breite seines übergeordneten Elements. Da das Bild höher als breit ist, überschreitet es die Höhe des Containers nach unten, um sein Seitenverhältnis beizubehalten und gleichzeitig seine Gesamtgröße zu maximieren.

Lösung: Explizite Höhe

Um dieses Problem zu beheben, müssen Sie dem übergeordneten Element lediglich eine explizite Höhe angeben. Dadurch legen Sie eine klare Basishöhe für die Berechnung der maximalen Höhe des untergeordneten Elements fest. Dadurch wird das untergeordnete Element auf die Höhe des übergeordneten Elements beschränkt, während sein Seitenverhältnis beibehalten wird.

Daher stellt die Angabe einer expliziten Höhe für das übergeordnete Element sicher, dass das untergeordnete Element seine maximale Höhenbeschränkung respektiert, was verhindert es verhindert, dass der Behälter überläuft.

Das obige ist der detaillierte Inhalt vonWarum überläuft mein untergeordnetes Element sein übergeordnetes Element, obwohl beide „max-height: 100 %' haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!