Flex layouts wrap appropriately on narrow screens

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.

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>

• ID: 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">