Can flexbox items wrap instead of expanding a container?

Question

I create a card layout in which individual cards stack vertically. With a wider screen width, more and more columns of cards are used - using as little vertical space as possible.

I am using the flex-flow: column wrap layout to do this. However, I found that in order to induce cards to wrap, the container requires height or max-height . Considering that the number of cards and their individual size can change, I can’t say that this height will optimally not cut objects or have excessive space below.

Can someone tell me if this is possible, or if I am doing something wrong?

Attached fragment.

 .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

To do this, you need to set the maximum height for the flex container, not flex items, because you want the flex items to be aligned in columns and larger columns for wider screens, and you don't want the flex items to resize, so set this relative value for flex container:

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

Add this to the flex container. Here, "vh" is a relative unit denoting "Viewport Height". 1 vh = 1% of the height of the viewport. Viewport = browser window size. If the viewport has a height of 50 cm, 1 vh = 0.5 cm.

Thus, no matter how wide the screen is, how many cards you insert, how large the cards will be, several columns will be used when the height of the content is greater than the height of the viewport.

They will also create horizontal scrollbars on displays that are set to a narrower width than the content. Therefore, if you do not want the scroll bars to be displayed, this can be eliminated using multimedia queries.