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.