Jak sprawić, by element elastyczny nie wypełniał wysokości elastycznego pojemnika?

Question

Jak widać w poniższym kodzie, lewy div wewnątrz elastycznego pojemnika rozciąga się, aby osiągnąć wysokość prawego div. Czy istnieje atrybut, który mogę ustawić, aby jego wysokość była minimalna do utrzymania zawartości (jak zwykle height: auto elementów div poza kontenerami 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, względnie align-content atrybut kontroluje ten problem.

align-items definiuje elementy pozycjonowania prostopadle do flex-direction domyślny flex-direction jest row, therfore pionowe rozmieszczenie może być sterowane z align-items. Istnieje również atrybut align-self, który kontroluje wyrównanie na podstawie poszczególnych pozycji.

#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 sztuczki ma doskonałą article na ten temat. Polecam przeczytać to kilka razy.

Answer 2

Podczas tworzenia kontenera flex pojawiają się różne domyślne reguły elastyczne.

Dwie z tych domyślnych reguł to flex-direction: row i align-items: stretch. Oznacza to, że elementy flex będą automatycznie wyrównywać w jednym rzędzie, a każdy element będzie wypełniał wysokość pojemnika.

Jeśli nie chcesz flex przedmioty rozciągnąć – czyli jak napisałeś:

dokonać jego wysokość minimalna wymagana do utrzymania jej treści

... po prostu zastąp domyślną wartością 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>

Oto ilustracja z flexbox spec który podkreśla pięć wartości align-items oraz w jaki sposób umieścić flex przedmiotów w pojemniku. Jak wspomniano wcześniej, domyślną wartością jest stretch.

^{Źródło: W3C}