Flex layouts wrap appropriately on narrow screens
Why it matters
A flex container with six nav items and the default flex-wrap: nowrap will push items off-screen on a 320px phone, or shrink them until labels overlap. Card grids that refuse to wrap force horizontal scroll within the grid itself, hiding half the cards. nowrap is the default — every flex container holding three or more items needs an explicit decision about what happens at narrow widths, and the default is almost always wrong.
Severity rationale
Low because most sites layer `flex-wrap` on critical layouts, so this tends to affect secondary surfaces like nav bars.
Remediation
Add flex-wrap: wrap to flex containers with three or more children, or change flex direction on mobile with flex-col sm:flex-row. Use flex: 1 1 280px on children so they grow to fill the row but drop to the next line when they can't fit.
<div class="flex flex-wrap gap-4">
<div class="flex-1 min-w-[280px]">...</div>
</div>
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile Responsiveness Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-responsiveness·automated