CSS fit-content Property
CSS fit-content property acts as a fit-content (stretch). Practically, this means that the box will be using the available space but still not more than the max-content.
When it is used as a laid out box size for height, min-width, width, max-height, and min-height where the minimum and maximum size refers to the content size.
The CSS sizing specification also defines the fit-content() function.
Syntax for fit-content Property
Following is the syntax for the fit-content property.
fit-content: length | percentage
Example 1: CSS fit-content Property
Here in the example below, we are using the fit-content property with different table or cell colours, border styles, and their different values. In this case, we have given the fit-content value of the text as 'width: fit-content'.
<!DOCTYPE html>
<html>
<head>
<title>The fit-content property in CSS</title>
<style type="text/css">
.container {
border: 2px solid #ccc;
padding: 10px;
width: 20em;
}
.item {
width: -moz-fit-content;
width: fit-content;
background-color: #8ca0ff;
padding: 5px;
margin-bottom: 1em;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item</div>
<div class="item">Item with more text in it.</div>
<div class="item">Item with more text in it, hopefully we have added enough text so the text will start to wrap.</div>
</div>
</body>
</html>
Output:
Example 2: CSS fit-content Property
In the example below, we are using the fit-content property with different table or cell colours, border styles and their different values. In this case, we have given the fit-content value of the container as 'width: fit-content'.
<!DOCTYPE html>
<html>
<head>
<title>The fit-content property in CSS</title>
<style type="text/css">
div {
color: deeppink;
}
.border-box {
border: 4px double purple;
width: fit-content;
background-color: #8cccff;
padding: 5px;
margin-bottom: 1em;
}
</style>
</head>
<body>
<div class="border-box">Study Tonight</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
46 |
46 |
| Edge |
79 |
79 |
| Firefox |
3 |
3 |
| Internet Explorer |
no |
no |
| Opera |
33 |
33 |
| Safari |
11 |
11 |
| Webview Android |
46 |
46 |
| Chrome Android |
46 |
46 |
| Firefox Android |
4 |
4 |
| Opera Android |
33 |
33 |
| IOS Safari |
11 |
11 |
| Samsung Internet |
5.0 |
5.0 |
Conclusion
The initial value for the fit-content property is none. This property is applicable to all elements and also to ::first-letter and ::first-line. This property is not an inherited one. The computed value for the fit-content property is the as specified one.
