[CSS] max-content, min-content, fit-content

max-content

https://developer.mozilla.org/en-US/docs/Web/CSS/max-content

The max-content sizing keyword represents the maximum intrinsic size of the content. For text content this means that the content will not wrap at all even if it causes overflows.

 

min-content

https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

The min-content sizing keyword represents the minimum intrinsic size of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

 

fit-content

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

The fit-content keyword is equivalent to fit-content(stretch). In practice, this means that the box will use the available space, but never more than max-content.

width: fit-content;

// the same as 

min-width: min-content;
width: auto;
max-width: max-content;

 

fint-content(strach)

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content_function

The fit-content() CSS function clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).

 

minmax()

https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids.

 

clamp()

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

font-size: clamp(1rem, 2.5vw, 2rem);