Dublin Library

The Publishing Project

Exploring Intrinsic Sizing

  • 2 min. read

 

There are two ways to measure content in CSS.

Explicit measurements are what we're most familiar with. These are the pixels, rems and ems.

Intrinsic sizes don't provide exact dimensions but size elements based on their content.

This post will cover these intrinsic, content-based, measurement units

min-content #

The min-content value is the intrinsic minimum width, which means that it’s equal to the width of the element’s content longest word.

According to the CSS Working Group:

The inline size that would fit around its contents if all soft wrap opportunities within the box were taken.

max-content #

The max-content value represents the intrinsic preferred width, which means that it’s equal to the width of the content, regardless of how wide the content is.

fit-content #

It’s a combination of using min-content and max-content.

The formula was rather hard for me to understand but it boils down to this:

fit-content uses max-content, unless available < max-content, then it uses available. Unless available < min-content, then it uses min-content.

And in a diagram looks like this:

graph TD
    A[Available Content Width] --> B{available < max-content?}
    B -->|Yes| C{available < min-content?}
    C -->|Yes| D[Use min-content]
    C -->|No| E[Use available]
    B -->|No| F[Use max-content]

If I understood it correctly, fit-content will not run past the width or inline size of the closest ancestor with a width or inline-size value.

Code Examples #

The first example that comes to mind when looking at intrinsic sizing is how to make the size of a caption match the size of the image inside the figure.

You can also experiment with the intrinsic sizing of text when working with creative designs or custom components.

Edit on Github