Gli elementi della flexbox possono preferire il wrap anziché l'espansione del contenitore?

Question

Sto creando un layout in stile carta, in cui le singole carte si impilano verticalmente. A larghezze dello schermo più alte, vengono utilizzate sempre più colonne di carte, usando il minor spazio verticale possibile.

Sto usando un layout flex-flow: column wrap per farlo. Tuttavia, quello che trovo è che il contenitore è necessario per avere un height o max-height al fine di incoraggiare le carte da avvolgere. Dato che il numero di carte e le loro dimensioni individuali possono cambiare, non posso dire quale sarà questa altezza in modo ottimale senza tagliare oggetti o avere uno spazio eccessivo sotto.

Qualcuno può dirmi se è possibile o se sto facendo qualcosa di sbagliato?

Snippet allegato.

.card-container { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: stretch; 
 
} 
 
.card { 
 
    flex: 0 0 auto; 
 
    width: 15rem; 
 
    margin: 0.5rem; 
 
    background-color: #f4f4f4; 
 
    /* max-height: ??? */ 
 
}

<div class="card-container"> 
 
    <div class="card" style="height: 20em"></div> 
 
    <div class="card" style="height: 17em"></div> 
 
    <div class="card" style="height: 5em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 21em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 17em"></div> 
 
    <div class="card" style="height: 8em"></div> 
 
    <div class="card" style="height: 20em"></div> 
 
    <div class="card" style="height: 16em"></div> 
 
    <div class="card" style="height: 19em"></div> 
 
    <div class="card" style="height: 10em"></div> 
 
    <div class="card" style="height: 5em"></div> 
 
</div>

Answer 1

Per raggiungere tale obiettivo, è necessario impostare max-height per il contenitore flessibile, non elementi flex perché volete gli articoli flessibili per essere allineati in colonne e aumentano le colonne per schermi più ampi e non si desidera che gli elementi flessibili per cambiare in termini di dimensioni, in modo da impostare questo valore relativo per il contenitore flessibile:

.card-container { 
    max-height: 100vh 
} 

Aggiungere questo al contenitore flessibile. Qui "vh" è un'unità relativa che sta per "Altezza vista". 1 vh = 1% dell'altezza della finestra. Viewport = la dimensione della finestra del browser. Se il viewport è alto 50 cm, 1 vh = 0,5 cm.

Quindi non importa quanto sia ampio lo schermo, quante schede si inseriscono, quanto saranno grandi le carte, verranno utilizzate più colonne ogni volta che l'altezza del contenuto è superiore all'altezza del viewport.

Questi creeranno anche barre di scorrimento orizzontali su schermi impostati su larghezze più strette rispetto al contenuto. Pertanto, se non si desidera visualizzare le barre di scorrimento, è possibile risolverle utilizzando le query multimediali.