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?