What the bug looks like

A sidebar, image column, card, avatar area, pricing column, or navigation item looks fixed in your CSS but becomes smaller when the screen gets narrower.

Why it happens

Flexbox tries to fit all items inside the container. If there is not enough room, items with flex-shrink:1 are allowed to shrink.

What usually fixes it

Use flex-shrink:0, flex:0 0 300px, or a responsive layout that stacks instead of crushing the fixed item.

Why width does not always protect a flex item

In normal block layout, setting width:300px usually feels direct: the element should be 300 pixels wide. Flexbox adds another layer. A flex item has a base size, a grow value, and a shrink value. The browser uses all of those rules to decide the final size.

That is why a fixed-width flex item can still shrink. The width may define the preferred starting size, but flex-shrink:1 tells the browser, “You may reduce this item if the row does not have enough space.”

This connects with other common FrontFixer layout problems like Flexbox not centering, container width problems, and horizontal scroll on mobile.

Common signs this is a flex-shrink problem

Why this can still shrink

This code looks normal, but the sidebar is still a flex item. And flex items are allowed to shrink by default.

The browser starts with the sidebar at 300px, but if the container does not have enough room for the sidebar, the content, the gap, and the padding, Flexbox may reduce the sidebar.

Simple rule: if the item must keep its size, do not rely on width alone. Tell Flexbox that the item is not allowed to shrink.

Before: the fixed item gets squeezed

The sidebar has a width, but it is still allowed to shrink. On a tight row, the fixed item becomes smaller than expected.

After: the fixed item keeps its size

With flex-shrink:0, the sidebar keeps its intended width. The flexible content area adapts around it.

The stronger production pattern

For production layouts, a cleaner pattern is often flex:0 0 300px. This tells the browser three things at once: do not grow, do not shrink, and start at 300 pixels.

This is especially useful for fixed sidebars, media columns, product thumbnails, icon columns, and dashboard panels.

Use flex-shrink:0

This tells Flexbox that the item should not be compressed when the row becomes tight.

Use flex:0 0 size

This is a compact way to lock the item’s grow, shrink, and basis behavior in one line.

Add min-width:0 to flexible content

The flexible area often needs permission to shrink instead of forcing the fixed item to compress.

Do not protect the fixed item forever

flex-shrink:0 is useful, but it can create horizontal overflow if the layout has no room. On small screens, the better solution may be to stack the layout instead of forcing a fixed sidebar and content area into the same row.

That is why the safest version usually combines a protected desktop layout with a mobile breakpoint.

Why min-width:0 also matters

Sometimes the fixed item is not the only problem. The flexible content next to it may contain long text, a code block, a large image, or an unbreakable URL.

If that content refuses to shrink, it can pressure the layout and make the fixed item look like the problem. Adding min-width:0 to the flexible content area gives it permission to shrink inside the available space.

Why image columns often shrink

A product card, author card, profile row, or media object often has an image column on the left and text on the right. The image column may have a width, but it can still shrink because it is also a flex item.

Protect the media column with flex:0 0 220px when the image area must remain stable.

.media {
  flex: 0 0 220px;
}

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