[Edit]

CSS - sizing elements using min-content, max-content and fit-content

1 contributors

2 contributions

0 discussions

0 points

Created by:

Marley-Marks

712

In this article, we would like to show you how to set the size of the elements using min-content, max-content and fit-content.

Quick solution:

xxxxxxxxxx
 
<style> div { border: 2px dashed #28a745; margin-top: 10px; } </style>
​
<div style="width: min-content;">min-content</div>
<div style="width: max-content;">max-content</div>
<div style="width: fit-content;">fit-content</div>
<div style="width: auto;">auto</div>

Auto running

Warning: The min-content and max-content were introduced to some major browsers around 2015-2020.

Practical example

Edit

In this example, we create four classes to compare the different sizes of elements:

auto - default layout which is full container size,
min-content - as small as possible to fit all the content, which is usually the largest piece of text,
max-content - as wide as possible to fit all the content (never shrinks down),
fit-content - as wide as possible to fit all the content but shrinks down until becomes the same size as min-content, then it stops shrinking. In short: max-content at full size, min-content at minimum size, otherwise fills the full container.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    div { border: 2px dashed #28a745; margin: 10px; }
    
    .min { width: min-content; }
    
    .max { width: max-content; }
    
    .fit { width: fit-content; }
    
    .auto { width: auto; }
    
  </style>
</head>
<body>
  <div class="min">min-content</div>
  <div class="max">max-content</div>
  <div class="fit">fit-content</div>
  <div class="auto">auto</div>
</body>
</html>