/ / Flexbox- stop flexbox item wächst - css, grid, flexbox

Flexbox- stop flexbox item growing - CSS, Grid, Flexbox

Grundsätzlich möchte ich verhindern, dass der untere Gegenstand auf die Höhe wächst. Ich möchte, dass das Flexbox-Element unten rechts nur die Höhe seines Inhalts hat (wie wäre es mit Display: Inline-Block;)

Die Gitter- und Gitterelemente haben ..

display: flex;
align-items: stretch;
flex-wrap: wrap

Bitte beachten Sie das beigefügte Bild.Bildbeschreibung hier eingeben

Vielen Dank

Antworten:

0 für die Antwort № 1

Sie sollten einen weiteren Container um Ihr unterstes Element erstellen.

<div class="container"> /* This container will be grown by Flex*/
<div class="grey-box"> /* This container will remain the same height as its children */
/* content */
</div>
</div>

Und Sie müssen die folgenden Eigenschaften auf Ihre anwenden .container div:

.container {
justify-content: center;
align-items: center;
align-content: center;
}

Mit den richtigen Voreinstellungen natürlich.