The keywords min-content, max-content, fit-content, stretch in CSS

View more Tutorials:

1- Overview

In CSS there are several keywords which represent values of the size (width or height) of the element. In this article I'm going to be explaining how they work.
  • min-content
  • max-content
  • fit-content
  • stretch
Example
width: max-content;
width: min-content;
width: fit-content;
width: stretch;

max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: stretch;

min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: stretch;

height: max-content;
height: min-content;
height: fit-content;
height: stretch;

......
Note: The above keywords only work with block elements or inline-block elements, which ensures that the elements will display as a rectangle. (with its width and height).

2- min-content

In a horizontal direction, the  min-content keyword represents the minimum value of the width without overflowing the contents of the element horizontally.
min-content-h-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>

         .my-element  {
            display: inline-block;
            border: 1px solid gray;
            background-color: SeaShell;
            padding: 5px;
            margin: 15px 35px 0px 0px;
         }
      </style>
   </head>
   <body>
      <h2>Horizontal 'min-content' value?</h2>

       <div class="my-element" style="width:20px;">
           This is text content of element.
       </div>

       <div class="my-element" style="width: min-content;">
           This is text content of element.
       </div>

       <div class="my-element" style="width: 180px;">
           This is text content of element.
       </div>
   </body>
</html>
 
In a vertical direction, the min-content ​​​​​​​keyword represents the minimum value of the height without overflowing the contents of the element vertically.
min-content-v-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>Value: min-content</title>
      <meta charset="UTF-8"/>
      <style>
         .my-element  {
            border: 1px solid gray;
            padding: 5px;
            margin-bottom: 25px;
            background-color: SeaShell;
         }
      </style>
   </head>
   <body>
      <h2>Vertical 'min-content' value?</h2>

       <div class="my-element" style="height:35px;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>

       <div class="my-element" style="height: min-content;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>

       <div class="my-element" style="height: 90px;">
           Line 1 <br/>
           Line 2 <br/>
           Some text content of the element.
       </div>
   </body>
</html>

3- max-content

max-content is a keyword that represents a value, the preferred intrinsic width of an element, or the preferred intrinsic height of an element.

How is the horizontal max-content value calculated?

width: max-content;
min-width: max-content;
max-width: max-content;
Suppose that you make the parent element infinite width (or very large), and the current element is in the minimum height (without overflowing its contents vertically). Then the max-content value is definitely the minimum width without overflowing its contents horizontally.

How is the vertical max-content value calculated?

height: max-content;
min-height: max-content;
max-height: max-content;
Suppose that you make the parent element infinite height (or very large), and the current element is in the minimum width (without overflowing its contents horizontally). The max-content value is then the minimum height without overflowing its contents vertically.

4- fit-content

By default the element writes its content according to: "Horizontal, Top to Bottom" -  CSS {writing-mode:horizontal-tb}. In this case, the fit-content keyword only makes sense in a horizontal direction.
  • TODO Link!
.element  {
  width: -moz-fit-content;  /** OLD Firefox */
  width: fit-content;
}
If the writing mode is horizontal, an element with CSS {width: fit-content}, which means:
  1. If the parent element can provide the current element with a width value greater than the max-content, then fit-content = max-content.
  2. If the parent element cannot provide the current element with a width value greater than the min-content, then fit-content = min-content.
  3. If the parent element can only provide the current element with a width value in the range (min-content, max-content), the current element will have a "fit" width to the parent element. 
The fit-content keyword will make sense in a vertical direction if the writing mode is vertical, which means:
.element {
    writing-mode: vertical-rl | vertical-lr;
    width: fit-content;
}

View more Tutorials: