fit-content and fit-content()

Right here’s some hardcore deep-dive CSS nerdery from PPK. If you happen to can wrap your thoughts round min-content (the smallest a component may be based mostly on the content material it comprises) and max-content (the most important the content material of a component can push it) then it’s only one extra little step to understanding fit-content. As PPK says, it’s shorthand for:

.field {
width: fit-content;

/* … is identical as … */
width: auto;
min-width: min-content;
max-width: max-content;
}

Which implies the factor will be capable to resize between the min and max.

My mind at all times thinks concerning the only-slightly-convoluted UI scenario of centering a horizontal nav that wants it’s personal background for some purpose. min-content doesn’t work because it smashes all of it too slender. max-content doesn’t work as a result of then it doesn’t enable wrapping. So fit-content is the child bear porridge.

PPK’s article has much more element about browser quirks and contains actually efficient interactive figures, so positively learn that — particularly when you fancy your self deeply knowledgable about CSS, because it will get humbling quick if you begin moving into the fit-content() operate in CSS Grid. Like how does 1fr fit-content(200px) 1fr play out in a template?

1fr min(min(max-content, available-size), max(min-content, 200px)) 1fr

Word: “the place available-size is the obtainable width within the grid.” Phew!

Direct Hyperlink to Article — Permalink

The publish fit-content and fit-content() appeared first on CSS-Methods.

You’ll be able to assist CSS-Methods by being an MVP Supporter.