`Fit-content` - Value CSS

fit-content

Summary of characteristics of the `fit-content` value

Quick description

Calculates the size of an element based on its contents and available space.

Status

Standard

W3C Module

CSS Box Sizing Module

References (W3C)

CSS Box Sizing Module Level 3

Document status: WD (Working Draft)

The `fit-content` value.

The fit-content value determines an optimal dimension by considering the content of the element and the available space. Basically, fit-content chooses the best size between auto, min-content, and max-content. The exact formula is:


	min(max-content, max(min-content, <place-disponible>))

See also the explanations for the max-content and min-content values and the fit-content() function. The latter performs the same calculation as the fit-content value but allows you to set up the available space.

The `fit-content` value can be used with the following properties:

block-size : Sets the size of an element in the block direction. For Latin-based languages, this logical property is equivalent to height.
flex-basis : Determines the default dimension of an element contained in a flex-box.
height : Sets the height of the element.
inline-size : Sets the size of the element in the inline direction. For Latin-based languages, this property is equivalent to width.
max-height : Sets a limit for the maximum height of the element.
max-width : Sets the maximum width of the element.
min-height : Sets the minimum height of the element.
min-width : Sets the minimum width of the element.
width : Sets the width of the element.

Examples of using `fit-content`.

Using `fit-content` to set the width of an element.

The three blocks below have their width set to fit-content. We can see that their width is adjusted to the content, but without exceeding the available space, in this case the width of the page.

Thanks to the internet: you can find out if it is raining.

Thanks to the internet: you can find out if it's raining without even having to look outside.

Thanks to the internet: you can find out if it's raining without even having to look outside, and even if you don't intend to go out.

Using `fit-content` to set the width of columns in a grid.

The fit-content value cannot be used to size columns in a grid. On the other hand, the fit-content() function can be, probably because the function allows you to set a maximum value.

CSS : Cascading Style Sheets.

A declarative language used for layouts and formatting documents.

HTML : HyperText Markup Language.

Markup language.

XML : Extensible Markup Language.

Data Exchange Format.

Using `fit-content` to set the width of elements in a flex-box.

All elements in the flex-box below have a width defined by fit-content. In addition, the flex-grow and flex-shrink properties have been set to 0. We can see that fit-content behaves like max-content, i.e. the elements are sized according to their contents, without adding line breaks, and without taking into account the available width.

Short text

Text a little longer

The content of this third element is really much longer

Using `fit-content` in an array.

The fit-content value is not effective for defining the dimensions of an array or cells. The latter are already defined by something which looks like fit-content.

Browser compatibility.

Column 1

Support for the value fit-content to size the width of any element with properties like width, grid-template-columns, etc.

Column 2

Support for the value fit-content to size the height of any element with properties such as height, grid-template-rows, etc.

Column 3

Support by browsers for the fit-content() function to size elements of a flexbox.

fit-content
value
used with
width

fit-content
value
used with
height

fit-content
value
used with
flex-basis

Estimated overall support.

95%

93%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

`fit-content` value historic.