Exploring Intrinsic Sizing
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: ```mermaid 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. ## Links And Resources * [CSS Box Sizing Module Level 3](https://www.w3.org/TR/css-sizing-3/) — W3C * [Intrinsic Size Determination](https://www.w3.org/TR/css-sizing-3/) — W3C * [Intrinsic Sizing In CSS](https://ishadeed.com/article/intrinsic-sizing-in-css/) — Ahmad Shadeed