Why Does My Image Overflow Even With max-width:100%?

by

Image overflow max-width 100 bugs happen when the image is constrained but its parent, flex item, grid track, or intrinsic size rule still pushes wider than the container.

CSS Image Overflow Fix

Why Does My Image Overflow Even With max-width:100%?

Image overflow max-width 100 bugs are frustrating because the obvious rule is already there. You add img{max-width:100%;}, refresh the page, and the image still creates horizontal scroll, pushes a card wider, or leaks outside its layout.

The reason is simple: max-width:100% only tells the image not to exceed the width of its containing box. If the containing box itself is too wide, cannot shrink, has a fixed minimum, or sits inside a stubborn flex or grid track, the image may still overflow the page.

  • max-width:100%
  • image overflow
  • flex and grid
  • responsive media

Test the parent, not only the image

Temporarily outline the image and its parent. If the parent box is wider than the viewport, max-width:100% is not failing. The image is simply filling a parent that should not be that wide.

Related: Try this in the FrontFixer Live Inspector.

Open Live Inspector

What the bug looks like

The image appears wider than its card, article, gallery, or mobile viewport.

Why it happens

The image is capped to a parent that is already too wide or cannot shrink.

What usually fixes it

Control the parent, allow the layout item to shrink, and set the image to block-level responsive media.

Why max-width:100% is not a complete image system

max-width:100% is an important rule, but it is not magic. It means “do not be wider than the containing block.” That containing block is the key. If the containing block is larger than the screen, the image can still be larger than the screen while technically following the rule.

This is why image overflow max-width 100 problems often come from layout CSS, not image CSS. A flex row may refuse to shrink. A grid column may have a minimum width. A wrapper may use width:100vw. A card may have fixed padding and a hard media width.

The clean fix is to make the whole media system responsive. The parent should be allowed to shrink, the image should be block-level, and any cropping should happen inside a wrapper with overflow:hidden, object-fit, and a predictable width.

Image rulemax-width:100% caps the image to its parent.
Parent ruleThe parent must also fit the available width.
Layout ruleFlex and grid children may need shrink permission.
Better mindsetDebug the image, parent, and layout track together.
Error 1

The image parent is wider than the viewport

The first trap is assuming the image is the only problem. If a wrapper is too wide, the image can follow max-width:100% and still create page overflow.

Broken code

Parent too wide 
.media-wrap {
  width: 640px;
}

.media-wrap img {
  max-width: 100%;
}

Broken visual result

Image follows wide parent
image is 100% of a too-wide parent
The image is not ignoring the rule. The parent is wider than the space.

Correct code

Parent can shrink 
.media-wrap {
  width: 100%;
  max-width: 640px;
}

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

Fixed visual result

Parent respects viewport
image fits responsive parent
Make the parent responsive before blaming the image.
Error 2

The image sits inside a flex item that cannot shrink

Flexbox can make image overflow confusing. The image may be responsive, but the flex item containing it may keep a minimum width based on its content. That parent needs permission to shrink.

Broken code

Flex child resists shrink 
.card {
  display: flex;
}

.card__media img {
  max-width: 100%;
}

Broken visual result

Flex item stays too wide
media min-width wins
The flex item refuses to shrink, so the responsive image still feels too wide.

Correct code

Flex item can shrink 
.card {
  display: flex;
}

.card__media {
  min-width: 0;
}

.card__media img {
  display: block;
  max-width: 100%;
  height: auto;
}

Fixed visual result

Flex item shrinks
media fits item
Use min-width:0 on the flex child that owns the image.
Error 3

The image is in a flex gallery with fixed item width

Galleries often use fixed thumbnail widths. The image rule may be fine, but the gallery item itself refuses to shrink or wrap. On mobile, the row becomes wider than the page.

Broken code

Fixed gallery item 
.gallery {
  display: flex;
  gap: 16px;
}

.gallery img {
  width: 220px;
  max-width: 100%;
}

Broken visual result

Gallery row overflows
Image A fixed
Image B fixed
Image C fixed
Each image is capped to itself, but the gallery row is still too wide.

Correct code

Flexible gallery items 
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.gallery img {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  height: auto;
}

Fixed visual result

Gallery wraps safely
Image A
Image B
The gallery items can shrink and wrap instead of forcing one long row.
Error 4

The image is inside a grid track that has a hard minimum

CSS Grid can also make images overflow. If the grid track or the grid child has a hard minimum width, the image may be responsive inside that track while the track itself pushes wider than the container.

Broken code

Grid track too strict 
.media-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.media-grid img {
  max-width: 100%;
}

Broken visual result

Track pushes layout
240px image track
content track squeezed
The image is limited inside a grid track that is still too wide for mobile.

Correct code

Track can respond 
.media-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 240px) minmax(0, 1fr);
}

.media-grid > * {
  min-width: 0;
}

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

Fixed visual result

Track respects container
image track shrinks
content stays inside
Use shrinkable tracks and min-width:0 on grid children.
Premium patterns

Three production-minded responsive image patterns

Premium image systems do not depend on one universal max-width rule. They define a responsive parent, a predictable media wrapper, and safe flex or grid behavior around the image.

Premium code example 1

Product card media 
.product-card {
  min-width: 0;
}

.product-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Premium visual result 1

Product media stays contained
premium
Card image system

Each card owns a media shell, and the image fills it without pushing the grid.

4/3
Long product name trims safely
4/3
Second card stays equal
Media shell controls image, not the image’s intrinsic width.
Pattern 1 is ideal for ecommerce cards, feature cards, and repeated product media.

Premium code example 2

Article media object 
.media-object {
  display: grid;
  grid-template-columns:
    minmax(96px, 160px) minmax(0, 1fr);
  gap: 18px;
}

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

Premium visual result 2

Article object stays readable
premium
Media object with safe tracks

The image track and text track can both shrink without creating page overflow.

thumb
Pattern 2 is ideal for article cards, list items, author cards, and search results.

Premium code example 3

Hero image wrapper 
.hero-image {
  width: min(100%, 1120px);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 24px;
}

.hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

Premium visual result 3

Hero image respects the page
premium
Large image without sideways scroll

The wrapper caps the hero, centers it, and prevents intrinsic image width from leaking.

wide hero image contained
max width centered no overflow
Pattern 3 is ideal for hero images, case study screenshots, banners, and large article visuals.

Fast practical rule

Use img{display:block;max-width:100%;height:auto;} as the baseline, but never stop there. Also check whether the image parent, flex child, grid track, or gallery item is allowed to fit the available width.

Debug checklist

  • Inspect the image and confirm max-width:100% is actually applied.
  • Add an outline to the parent wrapper and check whether the parent is too wide.
  • Set the image to display:block to remove inline image behavior.
  • Use height:auto unless a wrapper is intentionally controlling height.
  • Add min-width:0 to flex or grid children that contain images.
  • Check for fixed widths on galleries, cards, media objects, and wrappers.
  • Use overflow:hidden on the media shell when cropping is intentional.
  • Test on the narrowest mobile width, not only desktop preview.
Best first moveOutline the parent and see whether it is wider than the viewport.
Most common causeThe image is responsive, but the container is not.
Most sneaky causeA flex or grid child refuses to shrink around the image.
Better mindsetFix the media system, not only the image tag.

When max-width:100% is still the right rule

max-width:100% is still the correct baseline for responsive images. The mistake is treating it as the whole system. It protects the image from exceeding its parent, but it cannot repair a parent that is too wide or a layout item that refuses to shrink.

A strong production pattern uses the baseline image rule, a responsive wrapper, and layout tracks that can shrink. That combination handles real cards, product grids, screenshots, thumbnails, and article images much better than one global image rule.

Why this fix is different from image stretching

Image overflow and image stretching are related, but they are not the same bug. Overflow means the image or its layout area becomes wider than the container. Stretching means the image shape is distorted because width and height are being forced in a bad ratio.

This article focuses on overflow: the image is too wide, the parent is too wide, or the layout track is too stubborn. If the image fits but looks warped, the next thing to inspect is object-fit, height, and aspect ratio.

That separation prevents canibalization between fixes. This page answers why a supposedly responsive image still creates width overflow. The stretching, cropping, empty-space, and aspect-ratio pages answer different visual failures after the image is already inside the intended space.

Related fixes that can help

Image overflow max-width 100 bugs often connect to grid shrinking, flex shrinking, object-fit, image stretching, and mobile horizontal scroll.

Image stretching in CSS If the image fits the box but looks distorted. Read this fix
Image cropped wrong on mobile If the image fits but the important part disappears. Read this fix
Image leaving empty space If the media wrapper keeps a shape but the image leaves gaps. Read this fix
Why does Flexbox need min-width:0? If a flex child containing an image refuses to shrink. Read this fix
Why does CSS Grid need min-width:0? If a grid child containing an image pushes the track wider. Read this fix
Horizontal scroll on mobile? If the image overflow creates page-level sideways scrolling. Read this fix

Final takeaway

Image overflow max-width 100 bugs happen because max-width:100% only limits the image to its parent. If the parent, flex child, grid track, gallery item, or wrapper is too wide, the image can still create overflow while obeying the rule.

Start with display:block, max-width:100%, and height:auto. Then make the surrounding layout shrinkable. That is what turns a basic responsive image rule into a real production image system.

The strongest habit is to inspect outward: image first, wrapper second, layout item third, page width last. That order usually exposes the real source of overflow in seconds.

Want more fixes like this?

Browse more CSS image sizing, responsive media, grid, flex, overflow, and mobile layout debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Leave a Comment