Today I’d like to talk about intrinsic sizing in CSS, or more specifically, the difference between min-content, max-content, and fit-content. By using one of these three values with the width property, we can make a container’s width be defined by its content rather than by a fixed size. This allows the container to grow or shrink dynamically.
Intrinsic Sizing Explained
In CSS, there are two ways you can set a container’s width. The first option is to set a specific size (i.e. 100px). This will make the element be that size forever. The second option is to let the browser figure out the best width for the element. When we do the latter, that’s what is referred to as intrinsic sizing. It’s called intrinsic because the container will resize itself (depending on its content), as opposed to having the value be given by you (explicitly).
With intrinsic sizing, if the viewport is reduced, the space for the content will shrink, and therefore the container will also shrink. Elements will adjust their dimensions accordingly. This kind of flexibility is especially handy when dealing with variable content lengths or when you know that the content will change over time (e.g., user-generated content).
How it works
To understand how intrinsic sizing works, it’s better to see it in action.
Let’s start by creating a simple page with the following HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Intrinsic Sizing Box</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parent">
<div class="child">
1234
12345
12456
1234567
12345678
123456789
</div>
</div>
</body>
</html>On this page, we have created two containers: a parent and a child.
The following code will give our two containers their distinct background colors and also apply a max-content width for the child:
.parent {
background:#5582cb;
padding:15px;
margin:0 auto;
font-size:50px;
}
.child {
background: #028a3d;
border:2px solid #000000;
color:#02332e;
text-align:center;
width:max-content;
margin:0 auto;
}With this CSS in place, we will render the following page in our browser:
The numbers are there to help demonstrate the varying sequence of characters inside a container. With this page and dummy content, we can now begin experimenting.
Max-Content
Setting the width to max-content tells the green box (the child) to become as wide as necessary to accommodate its content in a single line. And so, it does. The numbers are spread out horizontally without any line-breaks or truncation.
There is still some space available for it to expand further, but it doesn’t. This is because it’s only growing as much as it needs to for its content.
This is assuming that the parent has enough space to expand horizontally. But what if it doesn’t have enough space? Let’s say we shrink the browser window (left to right).
Now we start seeing some overflow.
This is due to the parent shrinking down with the browser window since it has a width of auto. However, the child (the green box) isn’t basing its width on the browser window, it is basing it off its inner content (the numbers). This means the green box will stay as wide as it needs to for its content at all times, even when its parent container is shrinking. However, this results in overflow.
The numbers are still being shown on a single line, but as a result, the child is now longer than the parent, and so it naturally breaks out when its parent shrinks.
Remember, max-content is trying to make the inner container’s content appear in a single line. It has accomplished this, even when the outer container has no more room for it.
Min-Content
Our next option is min-content. Let’s go ahead and set the child to a width of min-content with the code below.
.child {
background: #028a3d;
border:2px solid #000000;
color:#02332e;
text-align:center;
width:min-content;
margin:0 auto;
}With this code, our browser will render our page in the following manner:
In this example, the green box’s width is determined by the min-content intrinsic size. Min-content will try to make the box as small as possible while keeping the box’s contents from overflowing the box itself. It will do this by using wrapping or truncation when needed.
What are we looking at exactly? The first thing we can tell is that it seems that the green box has shrunk! Though, if you notice, it stopped shrinking when it reached the ‘9’ of the bottom-most number. The reason for this is simple.
If the box was made any smaller, the number 123456789 would overflow and spill out, hence in this case, the min-content of the green box equals the width of that particular number, as it is the one that takes the most space horizontally.
You can see that it also works with actual words as well:
Min-content attempts to minimize the width of the element while accommodating the longest unbreakable sequence of characters. Going any smaller than that would mean there would be no space to be able to fit the longest word inside the container, causing overflow. Since it does not want to cause overflow, it stops at the longest word.
Fit-content
Our last option is fit-content which is a mix of the previous two. It is actually the best of both worlds. When the content has the available space for its max-content intrinsic size, the container will use that space and put everything in a single line.
However, if there isn’t enough space, it will begin wrapping or truncating the content and shrinking down the container, until it reaches the longest running word. As we have learned, this is the min-content intrinsic size of the container.
Here is an example of the kind of behavior I’m referring to:
The way that containers behave with fit-content is advantageous in responsive web design, where elements need to adjust to varying content lengths while ensuring they don’t overly expand and disrupt the layout. It strikes a balance between accommodating content and maintaining a defined boundary, making it a preferred choice for developers.
Basically, fit-content is telling the container: “Use the space available but never less than your min-content and never more than your max-content.”
Conclusion
In a constantly evolving web landscape, mastering these CSS sizing keywords empowers developers to create responsive, visually pleasing, and functionally robust designs that cater to the diverse needs of modern digital interfaces.
Unlike fixed sizes, which might lead to content overflow, intrinsic widths ensure elements can flexibly adjust based on their content length.
In my opinion, having a good grasp on intrinsic sizing techniques is an essential skill when learning to develop layouts for the web.
Last Updated on September 22, 2024
Leave a Reply