Warum wird die prozentuale Höhe ignoriert, wenn sie in mehreren Flexboxen mit ausgerichteten Gegenständen verschachtelt ⇐ CSS

[Anonymous]

Dies ist ein sehr erfundenes Beispiel, um das Problem zu destillieren, das ich beobachte. Ich weiß, dass ich es umgehen kann, aber ich möchte immer noch verstehen, warum das nicht so funktioniert, wie ich es erwarte. Ich würde im Grunde genommen gerne wissen: Ist es ein Fehler? Oder benimmt es es so, wie es entworfen wurde? Wenn ja, was sind die Spezifikationen?

Code: Select all

flex-end

im Beispiel). Ich möchte, dass jede Kategorie und jedes Element ihren Inhalt aufgrößen, ihre Höhe auf ihre Eltern einschränken und am Boden ausgerichtet sind. Wenn es Überlauf gibt, möchte ich, dass das Element seinen Inhalt scrollen kann.

Code: Select all

Item 1
Small content in section 1




Item 2

Large content in section 2. This section should scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
ultrices mi sit amet laoreet pulvinar. Nam vel pulvinar ligula, sit
amet dictum ligula. Maecenas tincidunt, dui vel sollicitudin
euismod, purus ipsum tincidunt mauris, nec tincidunt dolor odio at
turpis. Aenean non lacus ac purus rhoncus ultrices. Fusce ultrices
iaculis tellus, et venenatis neque ullamcorper tincidunt. Curabitur
non urna vitae odio hendrerit sagittis. Ut vitae accumsan arcu.

Item 3
Small content in section 2.





< /code>
CSS: < /p>
* {
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;
}

body {
height: 100vh;
}

.container {
height: 100%;
display: flex;
/* Comment this out here or in .category to make .item's max-height work. */
align-items: flex-end;
overflow: hidden;

gap: 5px;
padding: 5px;
border: 3px solid red;
}

.category {
display: flex;
flex: 1;
/* Comment this out here or in .container to make .item's max-height work. */
align-items: flex-end;
max-height: 100%;
overflow: hidden;

border: 3px solid green;
gap: 5px;
padding: 5px;
}

.item {
position: relative;

width: 200px;
/* PROBLEM: Not honored when both .container and .category have align-item specified */
max-height: 100%;
overflow-y: auto;

border: 3px solid blue;
padding: 10px;
}

Was ich erwarte: Screenshot - Item -Box, mit dem Scrollen stattdessen überfließen würde. /> Beobachtungen < /h2>
Das Element-Feld befolgt nicht Max-Höhe: 100%< /code>, obwohl die übergeordnete Kategorie mit offensichtlichen Grenzen und impliziert, dass die Referenzhöhe vorhanden ist. Die Höhe auf einen prozentualen Wert einstellen. Wenn Sie auf absolute Werte reagieren, die impliziert, wird nur prozentualer Wert ignoriert. Es ist nur ein Borken, wenn die Eltern und Großelternteil des Elements ausgerichtet sind: Flex-End angegeben. Trotzdem sollte es immer noch eine abgeleitete Referenzhöhe geben, die von 100VH des Körpers abgebaut wird. Daher ist es eine Überraschung, dass das doppelte Vernichten dieses Verhalten verursachen würde.>