Skip to main content

Flex layouts wrap appropriately on narrow screens

ab-001923 · mobile-responsiveness.layout.flex-wrap
Severity: lowactive

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>

Detection

  • ID: mobile-responsiveness.layout.flex-wrap

  • Severity: low

  • What to look for: Check flex container declarations. Look for display: flex without flex-wrap: wrap on containers holding multiple items that would overflow on narrow screens. In Tailwind, check for flex without flex-wrap (which defaults to nowrap). Identify flex containers holding navigation items, card grids, or horizontally-arranged elements.

  • Pass criteria: Count all flex containers (display: flex or Tailwind flex) that hold 3 or more child items. For each, verify it uses flex-wrap: wrap (Tailwind flex-wrap), or has a responsive breakpoint that changes layout direction on mobile (e.g., flex-col sm:flex-row). No more than 0 multi-item flex containers may lack a wrap or direction-change strategy. Do NOT pass when any flex container with 3 or more items uses the default nowrap without a mobile breakpoint override.

  • Fail criteria: At least 1 flex container without flex-wrap: wrap holds 3 or more items that cannot fit in a 320px-wide viewport and has no mobile breakpoint override.

  • Skip (N/A) when: Never.

  • Detail on fail: "Navigation flex container has flex-wrap: nowrap with 6 items — 1 of 4 flex containers will overflow on phone widths below 320px".

  • Remediation:

    .card-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 280px; }

    In Tailwind:

    <div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[280px]">...</div>
</div>

    For navigation, switch direction on mobile:

    <nav class="flex flex-col sm:flex-row gap-2">

Taxons

user-experience

History