When using percentage (%) for width, authors must be aware that the percentage is based on the element’s parent, or in other words, the width of the containing block. If your parent is set at 480px – as demonstrated by our demo – then the percentage is based on that value. So in our case 50% of 480px leaves us with 240px as a computed pixel value.

Note that width applies to all elements except non-replaced or inline elements , table rows and row groups (i.e. thead , tfoot and tbody ). There seems to be a slight mismatch as far as how HTML defines non-replaced elements and how CSS defines it , but we’re referring to it the way CSS does: elements whose content is not defined by the tag itself, such as an <img> with the src attribute.

For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.

Keyword values

With some special keyword values, it is possible to define width (and/or height) according to the content of the element.

min-content

The min-content value is the smallest measure that would fit around its content if all soft wrap opportunities within the box were taken.

The best example for this kind of value is a properly written figure element:

Because we’ve assigned min-content to the figure element, it takes the minimum width it can have when taking all soft wrap opportunities (like spaces between words) so that the content still fits in the box.

max-content

The max-content property refers to the narrowest measure a box could take while fitting around its content – if no soft wrap opportunities within the element were taken.

Check out what happens if we apply this to our simple kitten/figure demo:

Because the caption is very longer than the image is wide (it doesn’t take any soft wrap opportunity, like the spaces between words), it means it has to display the caption on a single line, thus the figure is as wide as that line.

fill-available

???. One of life’s great mysteries.

fit-content

The fit-content value is roughly equivalent to margin-left: auto and margin-right: auto in behaviour, except it works for unknown widths.

For instance, let’s say we need to center an inline navigation across the page. Your best bet would be to apply text-align: center to the ul , and display: inline-block to the li . This would give you something like this:

However, the blue background (from the ul element) spreads across the entire document because the ul is a block-level element, which means its width is restricted only by its containing element. What if we want to have the blue background collapsing around the list items? fit-content to the rescue!

With fit-content and margin: 1em auto , this works like a charm and only the navigation has a colored background, not the whole document width.

If you’re into this sort of thing, you’ll be happy to know the formula to define the size of a fit-content length is:

fit-content = min(max-content, max(min-content, fill-available))

This is a pretty unused value, so if you come up with a great use-case, let us know!

Browser support

IE	Edge	Firefox	Chrome	Safari	Opera
All	All	All	All	All	All

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
All	All	All	All	All

More information

If we wanted that figure element to essentially be the size of that image, so the text wraps at the edges of the image. We could float it left or right, because float will exhibit that same kind of shrink-to-fit behavior(…)

Could anyone possibly please explain how to achieve the same effect without setting up width for parental div ( figure in this particular case)? I’ve been trying to float it left, or right, but couldn’t force paragraph to shrink to fit to the image size. If I’d set up the width for 200px for div, the problem solves itself, but I don’t need any floats. So, how can I achieve the same effect without specifying width for the figure , only with floats?

Maybe you were joking about wondering what the fill-available value does, because it’s kinda obvious, its name says it all.

In case that you were not joking, what fill-available does is to give an element as much width (or height) as possible without overflowing its parent, that taking in consideration margin and padding (i.e. differently than 100% width).

I love fill-available :)

I don’t know if you still look for the answer but from what i experience using those two:

width : 100% define the element to be 100% of the width of the parent container that got defined dimensions.
max-width: 100 % restrict the size of the element to be lower or equal to 100% of the width of the parent container that got defined dimensions.

In other words, use width if you want your element to be strictly equal to his parent, use max-width for more flexible display and a safety that your element won’t be “out of the box”.

The link to the relevant CSS definition of non-/replaced-element is https://www.w3.org/TR/css-display-3/#replaced-element

Maybe this misunderstanding is caused by the HTML spec to define “replaced element” differently than CSS. This should be explicitly mentioned in the article, since an article about a CSS property naturally implies using the CSS definitions of things.

Hi, thanks for tutorials
How can i to use percent and pixel for width of 3column at left (pixel), center(%) and left(pixel) of same parrent,
Thanks
Like this: