CSS CSS Flexbox Layout Flexbox Properties Wrapping Flex Items

Abir Ahmed
PRO
Abir Ahmed
Pro Student 8,616 Points

flex-wrap doesn't work for too many items and it overflow in smaller screens, why?

Html File: (I deleted all the codes like !DOCTYPE html, body tag an so on for sake of time and getting into main point)

<div class="container">
    <div class="item-1 item">Item 1</div>
    <div class="item-2 item">Item 2</div>
    <div class="item-3 item">Item 3</div>
    <div class="item-4 item">Item 4</div>
    <div class="item-5 item">Item 5</div>
    <div class="item-6 item">Item 6</div>
<div class="item-1 item">Item 1</div>
    <div class="item-2 item">Item 2</div>
    <div class="item-3 item">Item 3</div>
    <div class="item-4 item">Item 4</div>
    <div class="item-5 item">Item 5</div>
    <div class="item-6 item">Item 6</div>
<div class="item-1 item">Item 1</div>
    <div class="item-2 item">Item 2</div>
    <div class="item-3 item">Item 3</div>
    <div class="item-4 item">Item 4</div>
    <div class="item-5 item">Item 5</div>
    <div class="item-6 item">Item 6</div>
</div>

FLEXBOX File:

.container { display: flex; flex-wrap: wrap; flex-direction: column; height: 280px; }

Hey Abir,

I just tested your code along with changing the flex-direction. The reason why it is overflowing is because your defined a specific height for your container class.

If you removed the defined height, your flex would respond automatically and will not overflow.

Here is the code that I used: .container { display: flex; flex-direction: row; flex-wrap: wrap; }

1 Answer

ywang04
ywang04
6,749 Points

It might be too much content for flexbox to manage on element of the smaller height. If you still want to use flex-direction with column. Basically, you can increase the value of height to avoid overflow issue.

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 280px;  //increase this value
}

Or as Michael Wells said, using flex-direction with row instead and removing height property can also fix overflow issue.

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}