Fit-content() - Function CSS

fit-content()

Summary of characteristics of the `fit-content()` function

Quick description

Calculates a dimension based on content and boundaries.

Status

Standard

W3C Module

CSS Box Sizing Module

References (W3C)

CSS Box Sizing Module Level 3

Document status: WD (Working Draft)

Description of the `fit-content()` function.

The fit-content() function calculates a dimension based on the content of the element, while ensuring that the dimension remains less than or equal to the limit indicated. It is especially effective for defining the width of columns or the height of rows in a grid (see grid-template-columns and grid-template-rows ).

fit-content() performs the following calculation:


	min(max-content, max(min-content, <parameter>))

The future specification should extend its use to block sizing (width, height, min-width, max-width, min-height and max-height).

The three cells below are part of three different grids. They have all been sized with fit-content(200px). We see that the width of the cells increases according to the content, but never exceeds the 200 pixel limit indicated.

Short text.

Slightly longer text.

Really much longer text that exceeds 200 pixels.

Note: There is also a predefined value fit-content that works in a similar way to the function of the same name, but which does not allow us to define a maximum dimension. The fit-content value, however, is better recognized by browsers for scaling elements outside of a grid. Learn more about the fit-content value.

See also the min-content and max-content value explanation pages.

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

grid-auto-columns : Sets the default width of columns in a grid.
grid-auto-rows : Sets the default height of lines in a grid.
grid-template-columns : Defines the number and width of columns in a grid.
grid-template-rows : Defines the number and height of lines in a grid.

Syntaxes of the `fit-content()` function.

grid-auto-columns: fit-content(100px);

fit-content() expects a single value, positive or null, followed by a unit of dimensions, except for the unit fr. See CSS dimension units. This value is treated as a maximum in the calculation of the optimal width.

Examples of use of the function `fit-content()`.

The fit-content() function is particularly useful for defining the width of the columns in a grid, or the height of its rows. It takes into account all the cells in the columns, or all the cells in the rows.

Computers are useless. They only know how to give answers.

Pablo Picasso

Artificial intelligence is no match for natural stupidity.

Albert Einstein

Artificial intelligence is defined as the opposite of natural stupidity.

Woody Allen

Simulator.

The simulator manipulates a grid of three columns. The width of the latter is adjusted according to the value you choose below.

grid-auto-columns :

auto

fit-content( 100px )

fit-content( 150px )

fit-content( 30% )

First cellule.

Second cell, containing more text.

3^rd cellule

Browsers compatibility with `fit-content()` function.

The following table shows support for the fit-content() function in three scenarios:

Column 1

Support by browsers for the fit-content() function in the context of a grid, to size column widths and row heights.

Column 2

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

Column 3

Support by browsers for the fit-content() function to size any element with the height and width properties.

Notes:

(1) Firefox can enable this feature with the flag layout.css.fit-content-function.enabled.

fit-content()
function
(grid)

fit-content()
function
(flex-box)

fit-content()
function
(others)

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

Historic of the `fit-content()` function.

CSS Box Sizing Module Level 3

Grouping of all box sizing techniques in this “Sizing” module.
Introduced the fit-content() function and the fit-content value.

September 27, 2012
Working Draft.
CSS Box Sizing Module Level 4

No modification concerning the fit-content() function or the value of the same name

May 26, 2020
Working Draft.

Block sizing, see also...

The CSS specifications published by the W3C are organized into modules. The fit-content() function is described in the CSS Box Sizing Module module, along with the value of the same name and the following definitions: