MDN definition

`<length>`	Defines the width as an absolute value. (pixel / em)
`<percentage>`	Defines the width as a percentage of the containing block's width.
[default] auto	The browser will calculate and select a width for the specified element.
max-content	The intrinsic preferred width.
min-content	The intrinsic minimum width.
fit-content (`<percentage/length>`)	Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, <length-percentage>))`.

Intrinsic and extrinsic sizing 内在和外在的尺寸

A div element containing content that has a fixed width and height of 200px:

<div class="s_1">
  nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor
  illum praesentium ipsa minus
</div>

Here we gave the div a border to see the extent of the size.

Untitled

Extrinsic sizing

When we alter the natural size of an element by applying a specific value to it (width: 200px), as seen in the image above, we refer to that sizing as extrinsic.

Intrinsic sizing

When the content’s size defines the element’s size, we refer to that as intrinsic or natural size.

By restricting the block’s dimension to a specific size, we experience a content overflow, a downsize of extrinsic sizing.

However, we can remedy the undesired behavior to produce a better layout by determining the element’s intrinsic size from the content using keyword values.

Intrinsic Keyword values

`min-content`

min-content is the smallest size a box can take without overflowing its content. (W3C specifications)

💡 For `horizontal` content, the `min-content` uses the length of the **widest** bit of **content** in the element box and automatically sets that **length** value as the box width.

Example 01 - Preview box above

If we revisit the box example above, we can apply the min-content to the box element like so:
```
.s_2 {
  /* ... */
  width: min-content;
  /* ... */
}
```
We should get this layout. Here, with min-content, the longest word within the content defines the size of the box, ****this is the intrinsic minimum width of the box.
Example 02 - Adding captions to images

In this case, we want to mark up an image with a caption that follows the width of the image, we can use min-content to achieve the desired result seamlessly.
```
<figure>
  <img
    src="<https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png>"
    alt="sample"
  />
  <figcaption>
    Lorem ipsum dolor sit amet consectetur adipisicing elit
  </figcaption>
</figure>
```
This gives the figure element a border to see the extent of the size.

Since the figure is a block element, its width naturally occupies its container element.

By assigning a width of min-content to the figure element, its size is defined by the widest bit of content.

In this case, the widest bit is the image:
```
figure {
  /* ... */
  width: min-content;
}
```
Example 03 - Sizing grid and flexbox items flex-basis: min-content

The min-content is also a valid value for a grid and flex sizing properties.
- flexbox
  
  In CSS, the flex-basis property of a flexbox system sets the size of the content box.
  
  This makes the min-content keyword an ideal value to automatically get the intrinsic minimum size of the box. We use flex-basis: min-content.
- grid
  
  Likewise, in a grid system, we can assign the min-contentkeyword to the grid-template-rowsor grid-template-columns properties to get the intrinsic minimum box size.
```
<div class="grid">
  <header class="header">
    
  </header>
  <div class="content">
    
  </div>
  <div class="footer">
    
  </div>
</div>
```
  Let’s transform the structure to a grid layout and apply a min-contentkeyword:
```
.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 100vh;
}
```
  With this, we get the intrinsic minimum value for the content height without causing an overflow.
  
  If we don’t apply min-content, we get different behavior.
  
  To visualize this behavior, we can temporarily remove the grid-template-rows and apply a fixed height to the header :
```
.grid {
  ...
  /* grid-template-rows: min-content auto min-content; */
  ...
}
.header {
  ...
  height: 40px;
}
```
  With this, we no longer get the natural content size.
  
  In this case, the element boxes may be too big for their content, causing the content to overflow the boxes.

`max-content`

💡 max-content represents a box’s ideal size in a given axis when given infinite available space.

💡 max-content represents the size a box needs to contain all of its content without being wrapped or it overflows the box.

max-contentworks pretty well for an infinite available space where the box element can contain all of its content without being wrapped and overflowing its parent container.

Example 01

With this, let’s apply a max-content to an element size:
```
<div id="container">
  <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
  <div class="item2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
</div>
```
We receive this output.

Here, the first box element takes the auto default width value, thus accommodating as much space as the container allows.

But, when applying the max-content value to the same box, we get the exact content size of the box.

💡 The max-conten keyword value is ideal in situations where we need the maximum width of the content to decide the size of the box.

Example 02 - grid layout

<div class="container">
  <div>Lorem</div>
  <div>
    Lorem ipsum dolor sit amet
  </div>
  <div>Lorem ipsum dolor</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  /* ... */
}

Untitled

This renders the column with the max-content value taking the content size while the column with the fr unit takes the remaining available space.

The undesirable effect of max-content

In a case where the parent or ancestral element cannot accommodate the size of the box, the box tends to overflow:
```
<div id="container">
  <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
</div>
```
```
#container {
  /* ... */
  width: 200px;
}

.item1 {
  width: max-content;
  /* ... */
}
```
With this code, the intrinsic maximum width of the box is longer than the container, causing overflow.

In this situation, we must adjust the box content to fit the container’s available space.

This is where the fit-content keyword comes in.

`fit-content`

Depending on the size of a container element, when applying fit-content to a box element within the container, the box either uses:

or the max-content size
or the min-content size
or the available container

as its ideal size.

💡 fit-content means: When given infinite available space, the max-contentdefines the box’s ideal size. However, when the viewport is narrower, the available space becomes the box’s size to prevent overflow until the box uses min-content.

Example 01

If we revisit our last example, by applying a fit-content to the box element, we have the following:
```
.item1 {
  width: -moz-fit-content; /* -moz- is to use this on Mozilla Firefox */
  width: fit-content;
  /* ... */
}
```
blog.logrocket.com/wp-content/…

As seen in the GIF above, the box uses the available space but never expands beyond the max-content, and when the viewport is narrower, the box never shrinks beyond the min-content.

The `fit-content()` function

fit-content()function allows developers to define a maximum allowable width for an element’s size.

Using fit-content()accepts a percentage or length unit as an argument:

fit-content(percentage | length)

Example 01 - grid layout

Similar to the fit-content keyword, when assigning this function value to determine the sizing in a grid layout, it uses the specified argument as the maximum allowable box size while ensuring the box never goes beyond the max-content:
```
<div class="container">     
  <div>Lorem ipsum dolor</div>
  <div>
    Lorem ipsum dolor, sit consectetur adipisicing elit.!
  </div>
  <div>Lorem</div>
</div>
```
```
.container {
  display: grid;
  grid-template-columns: fit-content(200px) fit-content(250px) auto;
  /* ... */
}
```
In the first column of the grid layout, we passed 200px as an argument, hence, the column has a maximum allowable width of 200px.

The second column has a maximum allowable width of 250px.

The third column takes the remaining container space since it is assigned a value of auto.

💡 The boxes whose sizes are defined by fit-content() never expand beyond the specified width while also never going beyond the max-content . But, when the viewport is narrower, the box can shrink to fit the content.

Conclusion

With these intrinsic keywords(min-content, max-content, fit-content), we have the flexibility to present page content in the most appropriate ways.

【Width】 length, percentage, auto, fit-content, min-content, max-content

MDN definition

Intrinsic and extrinsic sizing 内在和外在的尺寸

Extrinsic sizing

Intrinsic sizing

Intrinsic Keyword values

min-content

max-content

fit-content

The fit-content() function

Conclusion

`min-content`

`max-content`

`fit-content`

The `fit-content()` function