Abir Ahmed
Pro Student 8,616 Pointsflex-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; }
1 Answer
ywang04
6,749 PointsIt 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;
}
Michael Wells
4,493 PointsMichael Wells
4,493 PointsHey 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; }