CSS Foundations
Box Sizing
Control how padding and borders participate in declared sizes and prevent accidental overflow. You will see how content-box and border-box calculate dimensions, why controls overflow, and how minimum sizes affect Flexbox and Grid children.
The box-sizing property decides whether a declared width or height describes only the content box or the complete box through its border. That choice changes every padding and border calculation.
Unexpected overflow often comes from two independent constraints: the chosen box-sizing model and the element’s minimum size. A border-box reset solves the first by keeping padding and borders inside the declared dimension. It does not automatically solve long content or the content-based minimum applied to flex and grid items. This topic also connects with CSS Width and Height and Intrinsic Sizing.
Content box and border box
With the default content-box, a declared width covers only the content. Padding and borders are added outside it. With border-box, the declared width includes content, padding, and border.
Example
css
html { box-sizing: border-box; }
*, *::before, *::after {
box-sizing: inherit;
}This inheritance-based reset gives components predictable dimensions while still allowing a component to opt into another sizing model.
Minimum and maximum constraints
Example
css
.article {
width: min(100% - 2rem, 70ch);
margin-inline: auto;
}
.sidebar {
min-width: 14rem;
max-width: 22rem;
}Box-sizing Values
| Value | Declared size includes | Example |
|---|---|---|
| content-box | Content only | box-sizing: content-box |
| border-box | Content, padding, and border | box-sizing: border-box |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Box Sizing example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
html { box-sizing: border-box; }
*, *::before, *::after {
box-sizing: inherit;
}
.article {
width: min(100% - 2rem, 70ch);
margin-inline: auto;
}
.sidebar {
min-width: 14rem;
max-width: 22rem;
}
</style>
</head>
<body>
<main class="article"><h1>Border-box sizing</h1><aside class="sidebar">This box keeps padding and borders inside its declared width.</aside></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| box-sizing | 10 | 12 | 29 | 5.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- A flex or grid child may refuse to shrink because its automatic minimum size is content-based.
min-width: 0ormin-inline-size: 0is often the correct fix. - Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
A border-box reset and explicit minimum constraints make component sizing predictable.
Use the inheritance-based border-box reset as a foundation, then inspect min-width, min-inline-size, and intrinsic content when a child still refuses to shrink. This keeps the fix attached to the actual sizing rule instead of hiding overflow on an unrelated ancestor.