Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →To make a block-level parent shrink to its content without exceeding the available width, set width: fit-content and add max-width: 100%. This is usually the simplest way to make a div fit its children while keeping it responsive.
Make a parent div fit its content
A block in normal flow has width: auto by default, which generally makes it fill the width of its containing block. To have the parent size itself around its contents instead, use the intrinsic sizing keyword fit-content:
.parent {
width: fit-content;
max-width: 100%;
}fit-content adapts the element to its content while keeping its size within the container’s limits. MDN describes its sizing as min(max-content, max(min-content, stretch)): in practical terms, it accounts for the content’s preferred unwrapped width, its minimum wrapping width, and the space available. MDN: fit-content
For a layout that should follow the writing mode rather than assume horizontal text, use the logical inline-size properties:
#1 Best Overall
.parent {
inline-size: fit-content;
max-inline-size: 100%;
}Choose the right sizing behavior
| CSS choice | What it does | Wrapping and narrow containers | Typical use |
|---|---|---|---|
width: fit-content |
Shrinks or grows to fit content within available space. | Respects the content’s min-content and max-content sizes; can wrap where content permits. | A responsive badge, label, or content-sized block. |
width: max-content |
Uses the largest intrinsic width needed to display content without soft wraps. | Does not soft-wrap text, so it can overflow a narrow container. | Content that must stay on one line and has a known safe width. |
width: auto |
For a normal block in flow, generally fills the containing block. | Uses the browser’s normal block sizing rather than shrink-wrapping to content. | A standard full-width block. |
max-width: 100% |
Sets a maximum width relative to the containing block. | Acts as a practical guard against the content-sized box becoming wider than its container. | Pair with fit-content to keep a shrink-wrapped element within its parent. |
min-content is the smallest intrinsic size the content can take, generally using available wrapping opportunities. max-content is the width needed to display content without soft wraps. These intrinsic sizes inform fit-content; they are not interchangeable behaviors. MDN: min-content · MDN: max-content
Use fit-content for badges and labels
For a short label that should be only as wide as its text and padding, but should still respect its parent’s width, use:
.badge {
width: fit-content;
max-width: 100%;
padding: .25rem .5rem;
}If the text is too long to fit, ensure it has a valid place to wrap. For a long unbroken string, consider an appropriate wrapping rule such as overflow-wrap: anywhere rather than relying on fit-content alone.
When max-content is appropriate
Use width: max-content only when you want the box’s intrinsic width without soft-wrapping its contents:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.badge {
width: max-content;
}This can be useful for deliberately single-line content, but a long label or URL may extend beyond the screen on a narrow layout. If the content must remain on one line, provide a suitable overflow strategy; otherwise, prefer fit-content and let text wrap where possible.
Size a grid parent to its tracks
For a grid whose columns should each take their content’s max-content width, use max-content on the tracks and make the grid inline-level so the grid box itself can size to its contents:
.parent {
display: inline-grid;
grid-template-columns: max-content max-content;
}Because max-content tracks do not soft-wrap their content, long items can make the grid wider than its container. Choose track sizing and wrapping rules based on whether preserving content width or fitting a small screen matters more.
Account for padding and borders
With the default box-sizing: content-box, a declared width applies to the content box; padding and borders are added outside that width. As a result, the rendered box can be wider than the width value suggests. With box-sizing: border-box, padding and borders are included in the declared width, which makes component sizing easier to reason about:
Best Value
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.parent {
box-sizing: border-box;
width: fit-content;
max-width: 100%;
}The distinction matters when checking whether a content-sized box stays within its containing block. MDN: box-sizing
Check flex items separately
If the parent is a flex item, its final size is also affected by flex sizing. The intrinsic sizing keywords describe preferred sizes, while the flex container distributes available space among its items. If a child has long, unbroken text, check the interaction of flex-basis, min-width, and overflow-wrap; changing the parent’s width alone may not prevent overflow.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
