Why Your Flexbox Layout Breaks on Mobile (and 5 Fixes)

Flexbox looks perfect on your 1440px monitor. Then you open it on a phone and something's overflowing, a button's been squashed into an unreadable sliver, or a row that should've wrapped is instead scrolling off the edge of the screen.

None of this is Flexbox being buggy. It's Flexbox doing exactly what you told it to do — you just told it the wrong thing. Here are the five mistakes that cause almost every "flexbox breaks on mobile" bug, and the actual fix for each.

1. You Forgot flex-wrap

By default, flex items never wrap. They'll all try to squeeze onto one line no matter how narrow the screen gets, shrinking themselves (or overflowing) rather than dropping to a second row.

/* Breaks on mobile — items get crushed instead of stacking */
.nav {
  display: flex;
}

/* Fixed — items drop to a new line once they run out of room */
.nav {
  display: flex;
  flex-wrap: wrap;
}

If you actually want items to stack vertically on small screens instead of wrapping sideways, pair this with a flex-direction: column inside a media query, or just skip wrap entirely and go straight to column on mobile.

2. min-width Is Fighting Your Flex Items

This is the single most common cause of mobile overflow. Flex items have an implicit default of min-width: auto, which means a flex item will never shrink smaller than its own content — even if you've told it to shrink with flex-shrink: 1. A long word, an un-truncated URL, or an image with a hardcoded width will happily blow right through its container.

/* Breaks — the item refuses to shrink past its content's natural width */
.card {
  display: flex;
}
.card__text {
  flex: 1;
}

/* Fixed — let the item actually shrink below its content size */
.card__text {
  flex: 1;
  min-width: 0;
}

Add min-width: 0 (or overflow: hidden / overflow-wrap: anywhere if you need to wrap long text too) to any flex child that's supposed to shrink but isn't. This one line fixes an enormous number of "mystery" horizontal scrollbars on mobile.

3. Fixed Widths Instead of flex-basis and Percentages

Hardcoding width: 300px on a flex item works fine until the viewport is narrower than 300px — at which point the item just doesn't care and overflows its container anyway, because width on a flex item is only a starting point, not a hard limit, and plenty of layouts don't leave room for flex-shrink to save you once other rules are added on top.

/* Breaks below 300px viewport width */
.sidebar {
  width: 300px;
}

/* Fixed — scales down with the container instead of overflowing it */
.sidebar {
  flex: 1 1 300px; /* grow, shrink, starting basis */
  max-width: 100%;
}

Using flex-basis instead of width tells the browser "start here, but you're allowed to shrink." Adding max-width: 100% is a good insurance policy for any flex item that might otherwise ignore its container on very small screens.

4. Fighting the Direction Instead of Switching It

A row of five nav links or three pricing cards makes sense as a horizontal row on desktop. On a 375px-wide phone, cramming the same row sideways is a losing battle no matter how much flex-shrink and min-width cleanup you do — there just isn't enough horizontal space for five things to sit side by side and stay readable.

/* Desktop-first layout that doesn't survive mobile */
.pricing {
  display: flex;
}

/* Fixed — stack vertically below a sensible breakpoint */
.pricing {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .pricing {
    flex-direction: row;
  }
}

Writing mobile-first — column by default, switching to row once there's actually room — avoids most of the squeeze-everything-onto-one-line problems in the first place, instead of trying to patch them after the fact.

5. Nested Flex Containers Without min-width: 0 Anywhere in the Chain

This is problem #2's sneakier cousin. If you've got a flex container inside a flex item inside another flex container, the min-width: auto issue doesn't just affect one level — it can propagate up the whole chain. Fix it on the outer item and the inner one still blows out the layout, because each nested flex context has its own implicit min-width: auto floor.

/* Still breaks even after fixing the outer .card */
.card {
  display: flex;
  min-width: 0;
}
.card__body {
  display: flex; /* nested flex container — has its own min-width: auto */
}

/* Fixed — apply it at every nested flex level that needs to shrink */
.card {
  display: flex;
  min-width: 0;
}
.card__body {
  display: flex;
  min-width: 0;
}

When you're debugging a stubborn overflow inside deeply nested flex layouts, don't just add min-width: 0 to the outermost container and call it done — check every flex context between the overflowing content and the viewport edge.

Quick Debugging Checklist

Next time a flex layout misbehaves on mobile, check these in order:

1. Is flex-wrap: wrap actually set, if you need wrapping?
2. Does the overflowing item (or one of its flex-context ancestors) need min-width: 0?
3. Are you using width where flex-basis + max-width: 100% would behave better?
4. Would flex-direction: column on mobile just avoid the fight entirely?
5. If it's nested flex containers, have you checked min-width: 0 at every level, not just the outer one?

Nine times out of ten, it's #2. Chrome DevTools' Elements panel (and the flex-basis/min-width computed values in the Styles pane) will usually show you exactly which item is refusing to shrink — worth a look before you start guessing.

---

At ArtClick, we build fast, scalable WordPress websites, company websites and custom web systems that balance design, performance and long-term maintainability. Whether you're starting from scratch or improving an existing platform, we'd love to help.

https://artclickdev.com/