Come rendere un articolo flessibile non riempire l'altezza del contenitore flessibile?

Question

Come si può vedere nel codice sottostante, il div di sinistra all'interno del contenitore flessibile si estende per raggiungere l'altezza del div destro. C'è un attributo che posso impostare per rendere la sua altezza il minimo richiesto per mantenere il suo contenuto (come al solito height: auto div all'esterno dei contenitori flessibili)?

#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

Il align-items, o rispettivamente align-content attributo controlla questo comportamento.

align-items definisce le voci posizionamento perpendicolarmente flex-direction, il default è flex-directionrow, therfore posizionamento verticale può essere controllato con align-items. C'è anche l'attributo align-self per controllare l'allineamento per ogni articolo.

#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-trucchi ha un eccellente article sul tema. Consiglio di leggerlo un paio di volte.

Answer 2

Quando si crea un contenitore flessibile, entrano in gioco varie regole flessibili predefinite.

Due di queste regole predefinite sono flex-direction: row e align-items: stretch. Ciò significa che gli elementi flessibili si allineeranno automaticamente in una singola riga e ogni elemento riempirà l'altezza del contenitore.

Se non si desidera che gli elementi di flessione di allungare – cioè, come hai scritto:

rendere la sua altezza il minimo richiesto per lo svolgimento del suo contenuto

... poi semplicemente sostituisci il valore predefinito con 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>

Ecco un esempio dalla flexbox spec che mette in evidenza i cinque valori per align-items e come posizionare gli elementi flessibili all'interno del contenitore. Come accennato in precedenza, stretch è il valore predefinito.

^{Fonte: W3C}