Generally, we do a fixed width (ex. pixels) or container-relative width (ex. percentage) for a block element like
div. So, to size the width of an element based on its content, instead, hasn’t always been a usual or straightforward thing to do.
When we think of width that’s same as the content size, we think of inline elements. That’s why we almost always apply
display: inline-block to a block element to shrink its width to match that of its content.
That, however, like I mentioned before, is not a very straightforward approach.
Other ways a block element might shrink its width to that of its content is when it’s floated or absolutely positioned, none of which are ideal methods to do what we want.
However, there’s one approach I believe has the least caveats and is the most direct, because it uses the paramount
width has two values:
min-content that cause an element to wrap around its content to the content’s inclined and minimum-needed width, respectively. These values are also available for
height, but the browser support may not be as wide as for
There’s also the value,
fit-content, but I wouldn’t recommend it if you want the width to be based on content size alone, because
fit-content also considers the element’s container’s width along with the two criteria mentioned above while computing, and that might result in a width different from what you’d expected.
Below are three paragraphs with the second and last styled with
You can add a fallback width value and browser specific prefixes if needed.