How can I keep a box within its parent while letting it shrink?
Quick answer
Give the box width: 100% and a max-width value, such as 40rem. The width lets it shrink to fit a narrower parent; the maximum stops it from growing wider than your chosen limit. In this combination, the box is as wide as the parent when that is smaller than the maximum, and no wider than the maximum otherwise. [S1]
The question, the details, the next step.
I want a box to be capped at a comfortable width on a wide page, but not overflow a narrow parent. What CSS pattern should I use?
Use a fluid width together with an upper limit:
.box {
width: 100%;
max-width: 40rem;
}Here, 40rem is an example limit, not a universal recommendation. Change it to suit your layout. The width: 100% lets the box take the parent’s available width, while max-width prevents its used width from exceeding the chosen cap. In this combination, it is as wide as the parent when the parent is narrower than the cap, and no wider than the cap when the parent is wider. [S1]
Can you walk through what happens at different parent widths? I’m unsure whether the box will always be exactly 40rem.
No: 40rem is the ceiling, not a fixed width. For a simple illustration, assume the parent is 30rem wide in one case and 50rem wide in another.
- With a 30rem parent,
width: 100%makes the box fit that 30rem space because the maximum is not reached. - With a 50rem parent, the box can grow only to 40rem because of
max-width.
Those numbers are illustrative assumptions. The key relationship is that the resulting width is limited by whichever is smaller: the parent’s available width or the maximum. [S1] The right cap depends on your layout; the example value is not a universal recommendation.
What if I put a smaller min-width on the box too? How should I think about that?
A min-width sets a lower bound, and it takes precedence over max-width. [S1] So if the minimum is larger than the space available in a narrow parent, the maximum-width rule alone cannot ensure the box fits. For the basic “shrink to parent, but stop growing at a cap” pattern, leave out a minimum width unless you deliberately need one.
If you do need a minimum, compare it with the narrowest parent width you expect to handle. A minimum that is too large for that space conflicts with the goal of letting the box shrink. The simple pattern avoids that conflict by setting a fluid width and a maximum without adding a minimum.
Could you give me a reusable version with a short comment so I can adapt it for another box?
Copy this and replace .content-box with your selector and 40rem with the limit you choose:
.content-box {
width: 100%; /* Use the parent’s available width when possible. */
max-width: 40rem; /* Stop growing at this cap. */
}This pattern sets a fluid width and an upper limit; it does not make the element a fixed size. If you add a min-width, remember that it takes precedence over max-width, so consider whether the box will still be able to shrink in the parent widths you need to support. [S1]
A practical checklist
Set
width: 100%so the box can use the parent’s available width.Choose a
max-widththat suits the layout; treat the example value as a placeholder.Check whether any
min-widthon the box takes precedence over the maximum.Compare how the box behaves with narrower and wider parents.
A few more useful answers
Does `max-width` make the box exactly the maximum width?
No. It sets an upper limit. With width: 100%, the box can be narrower when its parent has less available width. [S1]
What if `min-width` is larger than `max-width`?
The minimum takes precedence over the maximum. That can prevent the box from shrinking as much as the parent requires. [S1]
Sources
References used for this guide.
- [S1] The CSS max-width property developer.mozilla.org · Checked