fit-content

fit-content is a value used to define the size of an HTML element based on its content. It is utilized in conjunction with the properties that accepts sizing values like width, height or properties used in the gird and flexbox layouts.

fit-content adjusts a size of a element to fit the content within it, without expanding beyond that. Essentially, it allows the element to be as wide or as tall as its content requires.

In this example the items will shrink or expand horizontally to fit its content. It won’t extend beyond the width of its content.

See the Pen Untitled by majadc (@majadc) on CodePen.

Related

Resources

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.