Czy przedmioty flexbox wolą owijać, zamiast rozszerzać kontener?

Question

Tworzę układ w stylu karty, w którym poszczególne karty układają się pionowo. Przy wyższych szerokościach ekranu używa się coraz więcej kolumn kart - używając jak najmniejszej przestrzeni pionowej.

Używam do tego układu flex-flow: column wrap. Jednak stwierdzam, że pojemnik musi mieć numer height lub max-height, aby zachęcić karty do zawinięcia. Biorąc pod uwagę, że liczba kart i ich indywidualny rozmiar mogą ulec zmianie, nie jestem w stanie określić optymalnej wysokości, bez odcinania przedmiotów i zbyt dużej ilości miejsca poniżej.

Czy ktoś może mi powiedzieć, czy jest to możliwe, lub czy robię coś nie tak?

Snippet załączony.

.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

Dla osiągnięcia tego celu, trzeba ustawić max-height dla elastycznego pojemnika, nie Flex przedmiotów, ponieważ chcesz Flex przedmioty mają być wyrównane w kolumnach i zwiększyć kolumny szerszych ekranach i nie chcesz, aby elementy flex zmieniały swój rozmiar, więc ustaw tę względną wartość dla elastycznego pojemnika:

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

Dodaj to do elastycznego pojemnika. Tutaj "vh" jest względną jednostką, która oznacza "wysokość rzutni". 1 vh = 1% wysokości rzutni. Viewport = rozmiar okna przeglądarki. Jeśli okno ma wysokość 50 cm, 1 vh = 0,5 cm.

Bez względu na to, jak szeroki jest ekran, ile kart zostanie włożonych, jak duże będą karty, wiele kolumn będzie używanych, gdy wysokość zawartości przekroczy wysokość rzutni.

Umożliwiają również tworzenie poziomych pasków przewijania na ekranach ustawionych na węższe szerokości niż zawartość. Jeśli więc nie chcesz, aby paski przewijania były wyświetlane, można to naprawić za pomocą zapytań o media.