Ограничение ширины дочерних элементов в вертикальном flexbox

Question

Как ограничить ширину дочернего элемента содержимым в вертикальной гибкой коробке? Как видно на голубом фоне, ширина ребенка занимает ширину контейнера. Я хочу, чтобы он занимал только ту ширину, которая ему нужна.

.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

Первоначальная установка гибкого контейнера align-items: stretch.

Этот параметр приводит к тому, что элементы гибкости расширяют всю длину поперечной оси контейнера. (Этот параметр позволяет использовать столбцы с одинаковой высотой в flexbox.)

Когда вы находитесь в flex-direction: column, поперечная ось горизонтальна, а дети по умолчанию расширяют ширину контейнера.

Вы можете переопределить значение по умолчанию align-items: flex-start на контейнере, или align-self: flex-start на каждом элементе гибкости.

.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>

Ссылки:

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