flex-basis

Why Is My Flexbox Gap Creating Overflow?

by

Flexbox gap creating overflow problems usually happen when flex items use percentage widths, fixed widths, nowrap rows, large gaps, or long content without leaving space for the gap itself.

Flexbox Overflow Fix

Why is my flexbox gap creating overflow?

A flexbox gap creating overflow bug can make a layout look perfect until the gap is added. Suddenly the row becomes wider than the container, mobile horizontal scroll appears, cards stick out of the viewport, or buttons refuse to fit. The issue is usually simple: the item widths already add up to 100%, then gap adds extra space on top.

CSS Fixes Responsive Fixes
  • Flex gap
  • Horizontal overflow
  • flex-basis
  • Mobile wrapping

What the bug looks like

The flex row sticks out of its container, creates horizontal scroll, or makes the last card partially disappear.

Why it happens

The items and the gap are both contributing to the total row width, but the math does not leave room for the gap.

What usually fixes it

Let flex calculate widths, subtract the gap from flex-basis, allow wrapping, and add min-width:0 where content needs to shrink.

Error 1

Each flex item is 33.333%, then gap is added on top

This is the classic flex gap overflow mistake. Three cards at one-third each already equal 100%. Adding two gaps makes the row wider than the container.

Broken code

100% + gap 
.cards {
  display: flex;
  gap: 18px;
}

.card {
  flex: 0 0 33.333%;
}

Broken visual result

Row is wider than container
overflow
Feature cards

The cards add up to 100%, then the gap adds extra width.

Card 1 Card 2 Card 3
The gap is not free space. It counts in the final row width.

Correct code

Subtract gap from basis 
.cards {
  display: flex;
  gap: 12px;
}

.card {
  flex: 1 1 calc((100% - 24px) / 3);
  min-width: 0;
}

Fixed visual result

Gap is included in the math
fits
Feature cards

The card width leaves room for the gaps inside the same row.

Card 1 Card 2 Card 3
For three columns with two gaps, subtract the total gap before dividing the width.
Error 2

The flex row is not allowed to wrap

A row can overflow simply because it is forced to stay on one line. If the viewport becomes too narrow, the items and gaps need permission to wrap onto the next line.

Broken code

nowrap row 
.cards {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
}

.card {
  flex: 0 0 180px;
}

Broken visual result

Cards cannot wrap
nowrap
Product cards

Fixed cards plus gap are forced into one line.

Item 1 Item 2 Item 3
The browser cannot create a second row because wrapping is disabled.

Correct code

Wrap when needed 
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.card {
  flex: 1 1 140px;
  min-width: 0;
}

Fixed visual result

Cards wrap safely
wrapped
Product cards

The row can create a new line before it overflows.

Item 1 Item 2 Item 3
flex-wrap:wrap lets the layout protect the viewport.
Error 3

Minimum widths are too large for the available space

Even with wrapping enabled, large minimum widths can make flex items overflow before they find a usable layout. This is common with cards, pricing boxes, badges, and responsive feature rows.

Broken code

Large minimum width 
.cards {
  display: flex;
  gap: 18px;
}

.card {
  flex: 1 1 0;
  min-width: 170px;
}

Broken visual result

Minimum width wins
min-width
Stats row

Each item refuses to shrink below a size that no longer fits.

Metric 1 Metric 2 Metric 3
A large minimum width plus gap can overflow even when flex-grow is enabled.

Correct code

Responsive minimum 
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.card {
  flex: 1 1 140px;
  min-width: min(100%, 140px);
}

Fixed visual result

Minimum width respects the container
safe min
Stats row

The item minimum works with the viewport instead of fighting it.

Metric 1 Metric 2 Metric 3
Use responsive minimums and wrapping so small containers are still safe.
Error 4

Long content inside flex items refuses to shrink

Flex items can have an automatic minimum content size. Long text, nowrap labels, URLs, buttons, and badges can force an item wider than expected unless you allow it to shrink with min-width:0 and safe text wrapping.

Broken code

Text refuses to shrink 
.card {
  flex: 1 1 0;
  min-width: auto;
  white-space: nowrap;
}

Broken visual result

Content pushes the row
long text
Action row

A long label makes the flex item wider than the available space.

Start free trial now Compare all pricing plans
The content width can be stronger than the flexible width you expected.

Correct code

Shrink-safe content 
.card {
  flex: 1 1 140px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

Fixed visual result

Content can fit
text safe
Action row

The content can wrap and the flex items can shrink safely.

Start free trial now Compare all pricing plans
min-width:0 is a small rule that fixes many flex overflow surprises.
Premium pattern

A production-minded flex gap pattern

A reliable flex gap layout lets the browser distribute space, allows wrapping, gives items a flexible basis, and protects long content from forcing overflow.

Premium code

Safe responsive flex row 
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
}

.card {
  flex: 1 1 min(100%, 220px);
  min-width: 0;
}

.card > * {
  min-width: 0;
}

.card-title,
.card-text {
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .card-row {
    gap: 12px;
  }

  .card {
    flex-basis: 100%;
  }
}

Premium visual result

Flexible, wrapped, no overflow
premium
Responsive card row

The gap is part of the layout system, not an extra surprise.

Card one Card two Card three
Premium flexbox gap CSS is not about removing gap. It is about giving gap real space in the layout.

Fast practical rule

If flexbox gap is creating overflow, do not start with overflow-x:hidden. First check whether your item widths already equal 100%. Then allow wrapping, subtract the gap when needed, and add min-width:0 to flex items with long content.

Debug checklist

  • Check whether flex item widths already add up to 100% before the gap is included.
  • If using fixed columns, subtract the total gap from the available width.
  • Add flex-wrap:wrap when the row should adapt to smaller screens.
  • Use flexible values like flex:1 1 220px instead of rigid desktop widths.
  • Add min-width:0 to flex items that contain text, buttons, badges, or nested content.
  • Reduce large desktop gaps at mobile breakpoints or use clamp().
  • Inspect long text and nowrap labels inside the flex items.
  • Check the parent container if the whole row is wider than the viewport even before gap is added.
Best first move Temporarily remove gap. If overflow disappears, your item width math is the problem.
Most common cause Items are set to percentage widths that already total 100%.
Most sneaky cause Long content inside the flex item prevents shrinking unless min-width:0 is added.
Better mindset Gap is real layout space. Your flex item widths must make room for it.

Related fixes that can help

Flexbox gap overflow often connects to mobile horizontal scroll, container width, responsive breakpoints, flex alignment, and oversized buttons.

Why is my page wider than the screen? If the flex row makes the entire page wider than the viewport. Read this fix
Horizontal scroll on mobile? If the gap creates a sideways scroll bar on phones. Read this fix
Fix Flexbox not centering If your flex row also has alignment problems after changing gap or wrapping. Read this fix
Fix container width problems If the parent container is already too wide before flex gap is added. Read this fix
Fix responsive design not working If the flex gap only breaks below a certain screen width. Read this fix
Why is my button wider than the screen on mobile? If buttons inside the flex row are the real overflow source. Read this fix

Final takeaway

A flexbox gap creating overflow problem usually means the row width math is wrong. The items take too much space, then the gap adds extra width that the container cannot hold.

Give the gap real room. Use wrapping, flexible basis values, safe minimum widths, and min-width:0 for long content. That keeps the layout responsive without hiding the real overflow bug.

Want more fixes like this?

Browse more Flexbox, overflow, and responsive CSS debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why Is My Flex Item Shrinking Even With a Fixed Width?

by

Flex item shrinking problems usually happen when Flexbox is allowed to compress an item, even when that item has a fixed width in your CSS. In most cases, the real fix is not a bigger width — it is controlling flex-shrink, flex-basis, and the neighboring content.

Flexbox CSS Fix

Why is my flex item shrinking even with a fixed width?

A flex item shrinking even after you set width:300px feels like the browser is ignoring your CSS. But in Flexbox, width is not always a locked promise. It can become the item’s preferred starting size, while flex-shrink:1 still gives the browser permission to compress it when the row runs out of space.

This usually affects fixed sidebars, image columns, avatar blocks, pricing cards, navigation items, media objects, and dashboard panels. The layout looks fine on a wide screen, then suddenly the “fixed” part gets squeezed, crushed, or narrower than the width you wrote in CSS.

Browse All Fixes Explore CSS Fixes
  • Flexbox sizing
  • Fixed sidebar bugs
  • flex-shrink
  • min-width:0

What the bug looks like

The sidebar, thumbnail, avatar area, or fixed card becomes narrower than expected even though DevTools shows a width in your CSS.

Why it happens

Flexbox is trying to fit all children into one row. If the row has less space than it needs, shrinkable flex items can be compressed.

What usually fixes it

Disable shrinking on the fixed item, define a clear flex basis, allow the content column to shrink, and stack the layout on small screens.

The simple rule behind this Flexbox bug

Flexbox does not only read width. It runs a sizing negotiation. Each flex item starts with a base size, then the browser checks whether the container has extra space or not enough space. If there is extra space, flex-grow can distribute it. If there is not enough space, flex-shrink can remove space from items.

That is why width:300px can still shrink. The width says “start around 300px.” The default flex-shrink:1 says “but you may reduce me if the row is too tight.” Once you understand that difference, the bug stops feeling random.

Error 1

Relying on width alone

This is the most common trap. You give the item a fixed width, but you never tell Flexbox that the item is forbidden from shrinking. So the browser still has permission to compress it.

Broken code

Width trap 
.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  width: 300px;
}

.content {
  flex: 1;
}

Broken visual result

Fixed width gets crushed
Sidebar width: 300px
Content wants space

The width exists, but the item is still shrinkable, so Flexbox can squeeze it when the row becomes tight.

Correct code

No shrinking 
.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
}

.content {
  flex: 1;
  min-width: 0;
}

Fixed visual result

The fixed item is protected
Protected sidebar
Content adapts

flex-shrink:0 tells the browser not to steal width from the sidebar.

Error 2

Not using flex-basis for the protected size

In many production layouts, the cleaner solution is not just width plus flex-shrink:0. It is using the Flexbox shorthand to define grow, shrink, and basis in one predictable rule.

Fragile code

Mixed signals 
.media {
  width: 220px;
}

.text {
  flex: 1;
}

Why this is weaker

It can work, but the fixed item’s size is not fully described in flex terms. The browser still has to combine width with default flex behavior.

Stronger code

Production pattern 
.media {
  flex: 0 0 220px;
}

.text {
  flex: 1 1 auto;
  min-width: 0;
}

Why this is stronger

flex:0 0 220px says: do not grow, do not shrink, and use 220px as the flex basis. That is clearer than hoping width wins.

Error 3

Forgetting min-width:0 on the flexible content

Sometimes the fixed item is innocent. The content next to it refuses to shrink because it contains long text, an unbreakable URL, a code string, a wide image, or default minimum sizing. This creates pressure that makes the fixed area look broken.

Broken code

Content pressure 
.sidebar {
  flex: 0 0 300px;
}

.content {
  flex: 1;
}

Why this can still fail

The content column may have a default minimum size based on its content. If it refuses to shrink, the whole row can overflow or create unexpected pressure.

Correct code

Shrink safely 
.sidebar {
  flex: 0 0 300px;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
}

.content p,
.content a,
.content code {
  overflow-wrap: anywhere;
}

Why this works

min-width:0 lets the flexible content become smaller than its natural content width. overflow-wrap:anywhere helps long text break instead of forcing the layout wider.

Error 4

Protecting the fixed item on screens that are too small

flex-shrink:0 is not magic. It protects the item, but if the screen is too narrow, protecting a 300px sidebar beside a content column can create horizontal scroll. On mobile, the layout may need to stack.

Broken mobile behavior

Too rigid 
.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 300px;
}

.content {
  flex: 1 1 auto;
}

Broken visual result

Mobile crush
IMG

A protected desktop layout can become too wide for mobile if you never change the layout direction.

Correct mobile behavior

Stack when needed 
.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  flex: 0 0 300px;
}

.content {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    flex-basis: auto;
    width: 100%;
  }
}

Fixed visual result

Mobile safe
IMG

The desktop fixed item is protected, but the layout is allowed to become a simpler mobile structure.

Error 5

Using flex-shrink:0 to hide a bigger layout problem

Sometimes disabling shrinking is correct. Other times it only moves the problem somewhere else. If the layout is too wide because of huge gaps, fixed widths, padding, long content, or too many columns, flex-shrink:0 can create overflow instead of solving the root issue.

Risky code

Overflow risk 
.card {
  flex: 0 0 360px;
}

.row {
  display: flex;
  gap: 32px;
  padding: 32px;
}

Why this can backfire

Three cards at 360px, plus gaps and padding, can easily exceed mobile width. The items no longer shrink, so the page may scroll sideways.

Better responsive pattern

Flexible cards 
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 min(100%, 280px);
  min-width: 0;
}

Why this is safer

This lets cards wrap and adapt instead of forcing every item to stay fixed in one row. Use protected fixed widths only when the design truly needs them.

Fast practical rule

If a flex item is shrinking even with a fixed width, do not keep increasing the width. First ask: is the item allowed to shrink? If it must stay fixed, use flex-shrink:0 or flex:0 0 size. Then make sure the neighboring flexible content has min-width:0 and the layout stacks or wraps on small screens.

When to use flex-shrink:0

Use flex-shrink:0 when an item has a meaningful visual size that should not be compressed. Common examples include a fixed sidebar, icon rail, media thumbnail, avatar column, label column, pricing card width, or control panel.

The important detail is intent. If the item’s width is part of the interface structure, protect it. If the item should adapt to available space, do not lock it too aggressively.

Good fixed sidebar pattern

Stable 
.page-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.sidebar {
  flex: 0 0 300px;
}

.main {
  flex: 1 1 auto;
  min-width: 0;
}

This pattern clearly protects the sidebar while letting the main column adapt.

Good media object pattern

Image safe 
.media-card {
  display: flex;
  gap: 16px;
}

.media-card__image {
  flex: 0 0 96px;
}

.media-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

.media-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

Why image columns get squeezed

Image columns often shrink because the image wrapper is a flex item too. The image itself may be responsive, but its parent still needs a protected flex basis if the thumbnail must keep a stable size.

This is especially common in blog cards, product cards, author boxes, comments, profile rows, and notification components.

Debug checklist

  • Confirm the element is actually a flex item: its parent must have display:flex or display:inline-flex.
  • Remember that flex items default to flex-shrink:1.
  • If the item must keep its width, add flex-shrink:0.
  • For a stronger pattern, use flex:0 0 300px instead of relying only on width:300px.
  • Add min-width:0 to the flexible content column beside the protected item.
  • Check for long words, URLs, code strings, buttons, images, or tables inside the flexible content.
  • Use wrapping or a mobile breakpoint when the protected row is too wide for small screens.
  • Do not solve the symptom with overflow:hidden unless hidden content is actually acceptable.
  • Check gaps and padding. A fixed item plus large gaps can break the available space calculation.
  • Use DevTools to inspect computed flex-basis, flex-shrink, and final rendered width.
Best first move Add flex-shrink:0 to the fixed item and retest.
Most common false fix Making the width bigger when the real issue is that shrinking is still enabled.
Most overlooked cause The neighboring content column may need min-width:0.
Production mindset Protect fixed items only when they truly need protection. On mobile, allow the layout to stack, wrap, or simplify.

Related fixes that can help

If your flex item is shrinking because of a larger layout issue, these FrontFixer guides are the next places to check.

Fix Flexbox not centering If the same flex layout is also failing to align items the way you expect. Read this fix
Why is my text overflowing outside the box? If long content inside the flexible column is forcing the row wider. Read this fix
Horizontal scroll on mobile? If protecting the fixed item creates unwanted sideways scrolling on small screens. Read this fix

Final takeaway

A flex item shrinking even with a fixed width usually means Flexbox is doing exactly what it was allowed to do. The default flex-shrink:1 tells the browser it may reduce the item when the row gets tight. A fixed width alone does not always protect that item.

Start with flex-shrink:0 or the stronger flex:0 0 300px pattern. Then add min-width:0 to the neighboring flexible content and use a responsive breakpoint when the row becomes too narrow. Once you control both the protected item and the flexible item beside it, this Flexbox bug becomes predictable instead of maddening.

Want more fixes like this?

Explore the full FrontFixer fixes library and keep debugging with practical guides built for real front-end layout problems.

Browse All Fixes Explore CSS Fixes