Как работает свойство fit-content в современных браузерах?

Свойство fit-content в современных браузерах позволяет рассчитывать размер элементов на основе их содержимого. 3

На практике это означает, что элемент, использующий fit-content, будет подстраиваться под свой контент, но не будет расширяться за пределы максимального размера содержимого. 3

Размер fit-content вычисляется по следующему уравнению, где — размер родительского элемента или дорожки сетки в макете сетки: 5

min(max-content, max(min-content, <available-space>)). 5

Некоторые варианты использования свойства fit-content:

• width: fit-content — регулирует ширину элемента на основе его содержимого. 3
• height: fit-content — динамически регулирует высоту элемента в соответствии с его содержимым. 3
• min-width: fit-content — устанавливает минимальную ширину, позволяя элементу расширяться по мере необходимости, но не уменьшаться ниже ширины содержимого. 3
• min-height: fit-content — устанавливает минимальную высоту для элемента. 3
• max-width: fit-content — указывает максимальную ширину, не позволяя элементу превышать ширину содержимого. 3
• max-height: fit-content — определяет максимальную высоту для элемента. 3

Свойство fit-content доступно во многих устройствах и версиях браузеров, работает с ноября 2021 года. 5