[Python] "CSS flexbox items overflow container on mobile despite flex-wrap: wrap"

Flex items refuse to wrap on mobile devices and cause horizontal scrolling, despite having flex-wrap: wrap set.

I have flex items that refuse to wrap on mobile devices and cause horizontal scrolling, despite having flex-wrap: wrap set.

Here's my complete HTML and CSS:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
gap: 10px;
padding: 20px;
box-sizing: border-box;
}

.item {
flex: 1 1 300px;
min-width: 250px;
height: 100px;
background: #3498db;
border-radius: 8px;
}

@media (max-width: 768px) {
.item {
flex-basis: 100%;
min-width: 200px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>


Expected behavior: Items should stack vertically on mobile screens below 768px width.

Actual behavior: Items create a horizontal scrollbar on mobile Chrome and Safari instead of wrapping.

Testing results:

• Desktop Chrome: Works perfectly ✓
• Mobile Chrome (iPhone): Creates horizontal scroll ✗
• Mobile Safari: Creates horizontal scroll ✗

What's causing the items to overflow instead of wrapping on mobile devices?

Items should stack vertically on mobile screens < 768px. What Actually Happens: Items create horizontal scrollbar on mobile Chrome/Safari.

Continue reading...