Begrenzungsbreite von Kindern in vertikaler Flexbox

Question

Wie kann ich die Kindbreite auf den Inhalt einer vertikalen Flexbox beschränken? Wie Sie am cyanfarbenen Hintergrund sehen können, belegt die Kindbreite die Breite des Containers. Ich möchte, dass es nur die Breite einnimmt, die es benötigt.

.container{ 
 
    display: flex; 
 
    background: yellow; 
 
    flex-direction: column; 
 
    padding: 5px; 
 
} 
 

 
.content{ 
 
    background: cyan; 
 
    margin: 5px; 
 
}

<div class="container"> 
 
    <div class="content">hello whats up</div> 
 
    <div class="content">hello whats up</div> 
 
</div>

Answer 1

eine Anfangseinstellung eines Flex Behälter align-items: stretch.

Diese Einstellung bewirkt, dass Flex-Elemente die gesamte Länge der Querachse des Containers erweitern. (Diese Einstellung ermöglicht Spalten mit gleicher Höhe in Flexbox.)

Wenn Sie sich in flex-direction: column befinden, ist die Querachse horizontal, und untergeordnete Elemente werden standardmäßig um die volle Breite des Containers erweitert.

Sie können den Standardwert mit align-items: flex-start für den Container oder align-self: flex-start für jedes Flex-Element überschreiben.

.container{ 
 
    display: flex; 
 
    background: yellow; 
 
    flex-direction: column; 
 
    padding: 5px; 
 
} 
 

 
.content{ 
 
    background: cyan; 
 
    margin: 5px; 
 
    align-self: flex-start; /* NEW */ 
 
    
 
}

<div class="container"> 
 
    <div class="content">hello whats up</div> 
 
    <div class="content">hello whats up</div> 
 
</div>

Referenzen:

• How to disable equal height columns in Flexbox?
• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?