Wie kann ein Flex-Element die Höhe des Flex-Containers nicht füllen?

Question

Wie Sie im folgenden Code sehen können, dehnt sich das linke div im Flex-Container aus, um die Höhe des rechten div zu erreichen. Gibt es ein Attribut, das ich einstellen kann, um seine Höhe so einzustellen, dass es den Inhalt hält (wie üblich height: auto divs außerhalb von Flex-Containern)?

#a { 
 
    display: flex; 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
</div>

Answer 1

Die align-items bzw. align-content Attribut steuert dieses Verhalten.

align-items definiert die Elemente senkrecht zu flex-direction Positionierung der Standard flex-direction ist row, therfore vertikale Anordnung kann mit align-items gesteuert werden. Es gibt auch das Attribut align-self, mit dem die Ausrichtung pro Artikel gesteuert werden kann.

#a { 
 
    display:flex; 
 

 
    align-items:flex-start; 
 
    align-content:flex-start; 
 
    } 
 

 
#a > div { 
 
    
 
    background-color:red; 
 
    padding:5px; 
 
    margin:2px; 
 
    } 
 
#a > #c { 
 
    align-self:stretch; 
 
}

<div id="a"> 
 
    
 
    <div id="b">left</div> 
 
    <div id="c">middle</div> 
 
    <div>right<br>right<br>right<br>right<br>right<br></div> 
 
    
 
</div>

CSS-Tricks hat eine ausgezeichnete article zum Thema. Ich empfehle es ein paar Mal zu lesen.

Answer 2

Wenn Sie einen Flex-Container erstellen, kommen verschiedene Standard-Flex-Regeln zum Einsatz.

Zwei dieser Standardregeln sind flex-direction: row und align-items: stretch. Dies bedeutet, dass Flex-Elemente automatisch in einer einzelnen Zeile ausgerichtet werden und jedes Element die Höhe des Containers ausfüllt.

Wenn Sie nicht flex Artikel wollen – dh strecken, wie Sie schrieb:

seine Höhe erforderliche Minimum zu machen für das Halten seines Inhalts

... dann einfach überschreiben Sie den Standardwert mit align-items: flex-start.

#a { 
 
    display: flex; 
 
    align-items: flex-start; /* NEW */ 
 
} 
 
#a > div { 
 
    background-color: red; 
 
    padding: 5px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    height: auto; 
 
}

<div id="a"> 
 
    <div id="b">left</div> 
 
    <div> 
 
    right<br>right<br>right<br>right<br>right<br> 
 
    </div> 
 
</div>

Hier ist eine Illustration aus dem flexbox spec, die die fünf Werte für align-items unterstreicht und wie sie innerhalb des Behälters flex Elemente positionieren. Wie bereits erwähnt, ist stretch der Standardwert.

^{Quelle: W3C}