A card that must never exceed 400 pixels but also needs to shrink on mobile, a button whose width should hug its text exactly, an image that must never stretch beyond its real size: sizing an element in CSS quickly outgrows a simple pair of width and height.
Three tools work together here: fixed values, flexible bounds with min and max, and intrinsic keywords that let the content itself decide the size of its own box.
Definition
width and height set an explicit dimension. The properties min-width, max-width, min-height and max-height add bounds that constrain that dimension without fully locking it, letting the element adapt between two limits.
.card {
width: 100%;
min-width: 240px;
max-width: 400px;
}This card fills all the available width, never going below 240 pixels or beyond 400, whatever the screen size.
Constraining a size with min and max
| Property | Role | Common use |
|---|---|---|
max-width | Prevents exceeding a width | Responsive image, readable text column |
min-width | Prevents going below a width | A button that must never get crushed |
max-height | Prevents exceeding a height | Content area with internal scrolling |
min-height | Prevents going below a height | Section that must fill the screen even empty |
img {
max-width: 100%;
height: auto;
}This exact pairing, almost a reflex in any CSS reset and normalize, stops an image from overflowing its container while keeping its original proportions thanks to height: auto.
The same pairing applies to any component, not only images: a button, a card or a text block often benefit from width: 100% paired with a max-width, filling the available space on mobile without ever stretching too far on a large screen.
Sizing by proportion with aspect-ratio
Rather than setting a width and a height separately, aspect-ratio enforces a ratio between the two: the height recalculates automatically as soon as the width changes, without ever needing to know the final size in advance.
.video {
width: 100%;
aspect-ratio: 16 / 9;
}The intrinsic keywords
Three lesser-known values of width let the content decide its own size instead of forcing a fixed number.
| Value | Behaviour |
|---|---|
min-content | The smallest width possible without causing overflow, often the longest single word |
max-content | The width the content would take if it never wrapped to a new line |
fit-content | Adapts to the content, but never exceeds the space actually available |
.tag {
width: fit-content;
padding: 4px 12px;
}This tag takes exactly the width of its text, never more, unlike a regular block-level element that would stretch across all the available width by default.
The auto min-width trap in flexbox and grid
A Flexbox or grid child gets min-width: auto by default, which stops it from shrinking below the size of its content, even when its parent enforces a narrower width with overflow set.
This is the most common cause of text silently overflowing a flexible row despite overflow: hidden being set on the parent. The fix fits in one line, min-width: 0 on the offending child, which finally allows the box to shrink below the size of its content.
Frequently asked questions
What is the difference between max-width and width?
width sets a fixed width, whether the container is big enough or not. max-width sets a ceiling the element will never exceed, while still letting it shrink freely below it, which makes it far better suited to a responsive site.
Why does my text overflow a flex column despite overflow: hidden?
Because children of a flex container get min-width: auto by default, which stops them from shrinking below the size of their content. Adding min-width: 0 on the child unblocks that shrinking and finally lets overflow do its job.
What is the real difference between fit-content and max-content?
max-content completely ignores the available space and can overflow its container. fit-content applies the same logic but stops at the limit of the space actually available, a behaviour that is almost always safer in practice.