Как сделать гибкий элемент не заполнять высоту гибкого контейнера?

Question

Как вы можете видеть в приведенном ниже коде, левый div внутри контейнера flex растягивается в соответствии с высотой правого div. Есть ли атрибут, который я могу установить, чтобы сделать его высоту минимальным, необходимым для хранения его содержимого (например, обычные height: auto divs вне контейнеров flex)?

#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

align-items, или, соответственно, align-content атрибут управляет этим поведением.

align-items определяет элементы позиционирования перпендикулярно flex-direction, по умолчанию является flex-directionrow, Therfore вертикальное расположение можно контролировать с помощью align-items. Атрибут align-self предназначен для управления выравниванием по каждой позиции.

#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-уловок имеет отличную article на эту тему. Я рекомендую прочитать его пару раз.

Answer 2

При создании гибкого контейнера в игру вступают в действие различные правила гибкости по умолчанию.

Два из этих правил по умолчанию: flex-direction: row и align-items: stretch. Это означает, что элементы гибки автоматически выравниваются в одной строке, и каждый элемент будет заполнять высоту контейнера.

Если вы не хотите, гибкие элементы, чтобы растянуть – то, как Вы писали:

сделать его высота минимум, необходимый для проведения его содержание

... тогда просто переопределите значение по умолчанию 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>

Вот иллюстрация из flexbox spec, которая выделяет пять значений align-items и как они позиционируют гибкие элементы внутри контейнера. Как упоминалось ранее, значение stretch является значением по умолчанию.

^{Источник: W3C}