Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do min-content and max-content work?
In CSS, we use length, percentage, and keyword values to define an element's size. For developers who want the freedom to present webpage content effectively, the CSS sizing property is necessary. You can use it to apply styles to websites. More significantly, you can do this without regard to the HTML code that each web page uses.
We sometimes employ the fit-content, min-content, and max-content keyword value types. Let’s jump into the article to learn about the working of the min-content and max-content.
CSS min-content
The keyword "min-content sizing" denotes the content's inherent minimum width. This implies that content will utilize all opportunities for soft-wrapping to shrink to the size of the longest word.
Syntax
Following is the syntax for CSS min-content
<style>
{
width: min-content;
}
</style>
Example
Let’s look at the following example, where we are going to use the min-content and observe the output.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: min-content;
border: 2px solid #DE3163;
}
body {
background-color: #D5F5E3;
font-family: verdana;
}
</style>
</head>
<body>
<center>
<div class="tutorial">
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" />
<h1>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</h1>
</div>
</center>
</body>
</html>
When we run the above code, it will generate an output consisting of the image along with a text that appears as a shrink in a box displayed on the webpage because we have mentioned it with a min-content.
CSS max-content
The maximum width or height of the content is implicitly represented by the phrase max-content sizing. This indicates that text content will never wrap, even if it results in overflows.
Syntax
Following is the syntax for CSS max-content
<style>
{
width: max-content;
}
</style>
Example
Following is an example of how we are going to implement max-content on our webpage.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: max-content;
border: 2px solid #196F3D;
}
body {
background-color: #D6EAF8;
font-family: verdana;
}
</style>
</head>
<body>
<center>
<div class="tutorial">
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" />
<h1>Tutorials Point originated from the idea that there exists a class of readers who respond better to online.</h1>
</div>
</center>
</body>
</html>
On running the above code, the output window will pop up, displaying the image along with text displayed without any wrap on the webpage.
10 Views
