Minmax 300px overflow mobile bugs happen when a CSS Grid track uses a minimum width that is wider than the space available on a phone or inside a narrow container.
CSS Grid Mobile Fix
Why does minmax(300px, 1fr) overflow on mobile?
minmax(300px, 1fr) overflows on mobile when the grid track is not allowed to become smaller than 300px. The 1fr part looks flexible, but the 300px part is a hard minimum. If the grid container becomes narrower than that minimum, the column still tries to keep at least 300px, and the layout can push beyond the screen.
This bug is easy to miss because the rule often looks professional on desktop. A grid like repeat(auto-fit, minmax(300px, 1fr)) creates clean responsive cards on large screens. But on a small phone, inside a padded container, or inside a narrow component, that 300px minimum can become too aggressive.
- CSS Grid
- minmax(300px, 1fr)
- Mobile overflow
- Responsive tracks
Test the actual container width
The question is not only “Is the phone wider than 300px?” The real question is “How much width is left inside the grid container after padding, margins, sidebars, and parent constraints?”
Related: Try this in the FrontFixer Live Inspector.
Open Live Inspector→What the bug looks like
A grid card, product list, article row, or pricing section creates sideways scroll on mobile.
Why it happens
The minimum in minmax(300px, 1fr) is larger than the available container width.
What usually fixes it
Use a safer minimum like minmax(min(100%, 300px), 1fr) or a smaller mobile minimum.
Why minmax feels responsive but can still overflow
minmax() is powerful because it lets a grid track live between a minimum and a maximum. The mistake is assuming that any minmax() value is automatically safe on every screen. The browser respects the minimum first. Only after the minimum is satisfied can the track stretch into the flexible 1fr space.
That means minmax(300px, 1fr) says: “This column can grow, but it should not get smaller than 300px.” On desktop, that is usually fine. On a small phone, especially inside a padded wrapper, the grid may not actually have 300px available for each card.
The better pattern is to make the minimum aware of the available container width. A common safe version is minmax(min(100%, 300px), 1fr). That tells the grid not to demand 300px when the container itself is narrower than 300px.
300px floor before sharing flexible space.The 300px minimum is wider than the mobile container
The most direct version of this bug happens when a grid track requires at least 300px, but the container has less than 300px available. The grid cannot shrink the track below that minimum, so the page can become wider than the screen.
Broken code
Minimum too large.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}Broken visual result
The track demands 300px even when the container is smaller.
Correct code
Container-safe minimum.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 16px;
}Fixed visual result
The card can become one readable track inside the container.
min(100%, 300px) wrapper prevents the minimum from being wider than the container.Container padding makes 300px too wide
A phone may be wider than 300px, but the grid itself can still have less than 300px after padding is subtracted. A 360px viewport with 24px padding on both sides leaves only 312px before gaps, borders, or other layout constraints.
Broken code
Padding steals space.section {
padding: 24px;
}
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}Broken visual result
The wrapper reduces the space before the card can fit.
Correct code
Responsive padding and minimum.section {
padding: clamp(14px, 4vw, 24px);
}
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: clamp(12px, 3vw, 20px);
}Fixed visual result
Padding, gap, and the grid minimum all scale together.
A nested component uses the same desktop minimum
A grid inside a modal, sidebar, card body, tab, or dashboard widget may have far less space than the page. If that component inherits a 300px grid minimum, it can overflow even on screens that are not especially small.
Broken code
Component too narrow.widget-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
}Broken visual result
The component is narrower than the page.
Correct code
Component-safe grid.widget-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 12px;
}
.widget-grid > * {
min-width: 0;
}Fixed visual result
The nested grid uses a smaller, safer minimum.
Long content makes a safe track look broken
Sometimes the minimum is not the only problem. Long titles, URLs, labels, or buttons inside the grid card can also push the layout wider. Even after fixing minmax(), the grid children need to be allowed to shrink.
Broken code
Child refuses to shrink.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(300px, 1fr));
}
.card-title {
white-space: nowrap;
}Broken visual result
A long title can push past the card edge.
Correct code
Track and child can shrink.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.card {
min-width: 0;
}
.card-title {
overflow-wrap: anywhere;
}Fixed visual result
The track can shrink and the title wraps safely.
A production-minded minmax pattern
A premium grid uses a minimum that respects the container, scales spacing, and protects the card content from forcing overflow. This gives you the clean desktop behavior of minmax() without letting the minimum attack mobile layouts.
Premium code
Safe minmax grid.card-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: clamp(14px, 2vw, 24px);
}
.card-grid > * {
min-width: 0;
}
.card-title {
overflow-wrap: anywhere;
}
.card-media {
aspect-ratio: 16 / 9;
object-fit: cover;
}Premium visual result
The minimum never asks for more width than the container can provide.
Fast practical rule
If minmax(300px, 1fr) causes mobile overflow, the minimum is probably too large for the real container. Use minmax(min(100%, 300px), 1fr), choose a smaller mobile minimum, and make sure grid children use min-width:0 when needed.
Debug checklist
- Search for
minmax(300px, 1fr)in the grid rule. - Check the actual grid container width, not only the viewport width.
- Subtract section padding, card padding, wrapper padding, and gaps.
- Test the grid inside narrow parents like modals, sidebars, tabs, and widgets.
- Try
minmax(min(100%, 300px), 1fr)and compare the result. - Use a smaller minimum such as
240pxor280pxwhen the card design allows it. - Add
min-width:0to grid children that contain long content. - Protect titles, buttons, and URLs with wrapping or overflow handling.
300px with min(100%, 300px) and re-test mobile.When 300px is still the right minimum
300px can be a good minimum for cards that need enough space for media, titles, pricing, or actions. The mistake is not the number itself. The mistake is using that number without checking whether every container that uses the grid can actually provide it.
If the grid lives in a wide page section, 300px may be perfect. If the same pattern is reused inside a sidebar or small dashboard widget, it may be too much. That is why component context matters more than copying one grid recipe everywhere.
The authority move is to treat 300px as a design preference, not a universal law. Give the browser a safe escape route when the container is smaller.
Why this bug survives desktop review
On desktop, a 300px minimum usually looks excellent. Cards feel comfortable, columns are readable, and the grid spacing looks intentional. That is why this bug often gets approved during desktop review and only appears once someone checks a real phone.
The best habit is to test not just the browser width, but also the smallest version of each component. If the card grid can appear inside a filtered panel, carousel slide, modal, sidebar, or narrow content column, test it there too.
Final takeaway
minmax(300px, 1fr) overflows on mobile because the 300px minimum can be larger than the actual space available inside the grid container. The 1fr value is flexible, but it cannot override a minimum that is too large.
Use safer minimums, account for padding and parent width, and protect long content inside grid children. That keeps the clean desktop behavior of CSS Grid while preventing mobile layouts from becoming wider than the screen.