fit-content and fit-content()

No Comments

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.

CodePen Embed Fallback

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 ArticlePermalink

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.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment