How do min-content and max-content work ?

Last Updated : 06 Jun, 2022

CSS (Cascading Style Sheets) is a stylesheet language used to design a webpage to make it attractive. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independent of the HTML that makes up each web page.

In this article, we will learn how to do CSS min-content and max-content properties work.

min-content and max-content properties:

min-content and max-content are the value of the width property. When we define any element with this property, then it will affect that particular element.

max-content: This value is used to determine a size assuming that there is infinite available space.
min-content: This value is used to determine a size assuming that there is infinite available space.

Approach:

Create an HTML file with some CSS properties.
After that, we will add an HTML div element and within this element, we will include images and some text.

Example 1: In the below code, we will see the use of min-content and how it works.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1"> 
    <title>GeeksforGeeks</title> 
      
    <style> 
        .card{ 
            width:min-content; 
            border:1px solid black; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;font-size:30px;"> 
            GeeksforGeeks 
        </h1> 
        <div class="card"> 
             <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" 
             alt="GFG image" />  
             <h1>GeeksforGeeks is a computer science portal for geeks</h1> 
        </div> 
    </center> 
</body> 
</html> 

Output:

min-content

Example 2: In the below code, we will see the use of the CSS max-content property and how it works.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1"> 
    <title>GeeksforGeeks</title> 
      
    <style> 
        .card{ 
            width:max-content; 
            border:1px solid black; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;font-size:30px;"> 
            GeeksforGeeks 
        </h1> 
        <div class="card"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png" 
                 alt="GFG image" />  
            <h1>GeeksforGeeks is a computer science portal for geeks</h1> 
        </div> 
    </center> 
</body> 
</html> 