The “fit-content” CSS Style Rule Is Amazing!

One of the downsides of no longer using sidebars is that you lose space to put stuff like “Related Posts”. But I still stick with my decision to do away with sidebars on my site – mostly because when it comes to long-form content, the sidebars vanish quickly anyway. For lasting benefits, you’ll have to make them “sticky”, and that has its own share of problems. So now I implement “Related Posts” in the body of my site. And recently, I found a great CSS property “fit-content” to make it look the way I want.

For some reason, there’s not too much discussion of the “fit-content” CSS style. Chrome has supported it for a while, and Firefox supports its own “moz” version which I’ll discuss below. But first, here’s why I think the fit-content rule is needed.

How Blocks Look without “fit-content”

Let’s say I have a related posts block on my site. In this example, the article is about the NameHero reseller service, so I have a section on my site WP-Tweaks with posts related to the content. Here’s what it looks like without any layout considerations:

As you can see, the box extends to the right. Ideally, I want it to wrap around the content, and nothing more. For now, I don’t want to float it because the content underneath is a table of contents, and it wouldn’t make sense. So I just want the box to fit the maximum content – nothing more. We have a CSS style called max-content which seems to do get the job done.

max-content Doesn’t Work

But here’s what “max-content” looks like when the text is large and the screen is small:

In this example, I’ve artificially elongated the text of the mainline. You can see that with “max-content”, the element doesn’t wrap as the screen shrinks. And because of that, it gets cut off. If you look closely, you can also see that the right-hand borders are not rounded. Meaning the box isn’t resizing. It’s visually unacceptable.

“Min-content” has a similar problem, but in this case, it looks even worse.

Setting a Width Percentage Won’t Work Either

What if I just set the width to 50%? It seems to work fine on large screens, but begins it look ridiculous on small screens:

Why None of these Solutions Work

What we want, is for the browser to somehow make the content fit the available space, and then draw the box around it. This would seem to contradict the paradigm of working from the top to the bottom – namely, determining the size of the box first, and then the contents.

Luckily, we have a rule that can save us.

“fit-content” Gets the Job Done

Here’s what happens when I set the width of the box to “fit-content”:

As you can see, the elongated text wraps around to fit the screen, and the box fits the content perfectly. The borders are rounded, which means the box has shrunk. Perfect! This is the only CSS rule which does this, and I’ll be using it for a lot of blocks going forward.

Special Considerations for Firefox

Firefox has its own version of “fit-content” called “-moz-fit-content”. You can use the two together just to cover all use-cases like this:

width: fit-content;
width: -moz-fit-content;

Chrome will use the “fit-content” rule and Firefox will use the “-moz-fit-content” rule. There’s an action item on bugzilla.mozilla.org that’s asking for the prefix “-moz-” to be removed, and it looks like it’s slated for release with Firefox version 94. As I write this, my version of Firefox is version 93, so it looks like it might be coming soon! Till then, we can use the above CSS rules, and it’ll work just fine.

I hope you find “fit-content” as useful as I have!