The keywords min-content, max-content, fit-content, stretch in CSS
View more Tutorials:
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).
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>
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.
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:
- If the parent element can provide the current element with a width value greater than the max-content, then fit-content = max-content.
- If the parent element cannot provide the current element with a width value greater than the min-content, then fit-content = min-content.
- 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;
}
