How does content fit?

Okay, do you know about fit-content? It’s the sibling of min-content and max-content. It can be a bit tricky to wrap your head around at first, but let’s break it down.

.element {
  width: fit-content;

  /* is the same as */
  width: auto;
  min-width: min-content;
  max-width: max-content;
}

In simple terms, fit-content allows an element to resize between the minimum and maximum width of its content, depending on the available space. That’s fairly straightforward. Now, let’s move on to its more complex cousin, fit-content(), which gets a bit more humbling rather quickly.

To better understand how it works, I created an example in CodePen.

See the Pen fit-content() playground by Jessica Skårbratt (@jessicaskarbratt) on CodePen.

In the CodePen example, there are two columns with the value fit-content(20ch), yet they don’t have the same width. Why is that? I also added another example where we define columns using the minmax() function, but as you’ll see, the result is different.

Looking at the code below might make things a bit clearer. But take it slow—it’s a bit tricky!

grid-template-columns: 1fr fit-content(50ch) 1fr;

/** is the same as */
grid-template-columns:
  1fr min(max-content-size, max(min-content, 50ch))
  1fr;

The max() value becomes either min-content or 50ch, whichever is larger. Then, this is compared to the maximum content size, and the smaller value is chosen.To make things more complex, the “maximum content size” is actually determined by the available space within the grid constraints, but it can never exceed max-content. So, the real formula looks more like this:

/* is the same as */
grid-template-columns:
  1fr min(min(max-content, available-size), max(min-content, 50ch))
  1fr;

It took me a few tries to really grasp this one, but I think it’s quite nice!