CSS width: Commonly Overlooked fit-content/max-content/min-content Values

Technology
1

Preface

This article records the values related to the width property in CSS3. When you enter width in the browser, the popup prompt has the following properties:

在这里插入图片描述
在这里插入图片描述373×280 7.22 KB

This article mainly explains the following properties: fill-available, fit-content, min-content, and max-content


1. fill-available (default)

1.1 Understanding the fill-available property value

The fill-available property value is relatively easy to understand: it makes full use of available space. When you create a div element without any additional styles, the width behavior of this element is fill-availabel, it automatically fills the available space.

This is what we commonly refer to as the box model: the sum of the horizontal values of margin, border, padding,content of the box model equals 100% of the parent element's width property value.

Example:


  .wrap {
    width: 500px;
    height: 300px;
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
  }



  
敬天爱人

  
心不唤物，物不至

  

    你心中描画怎样的蓝图，决定了你将度过怎样的人生。强烈的意念，将作为现象显现——请你首先铭记这个“宇宙的法则

Result:

在这里插入图片描述
在这里插入图片描述671×417 81.6 KB

This behavior of fully utilizing available space is called "fill-available"


1.2 Usage Scenarios

The value of the fill-available keyword is that when we need an inline-block element to automatically fill 100% of the available space like a block element, we do not need to modify the display property to block. Modifying the display property may cause other unexpected issues. With this property, we can give a wrapping inline-block element the 100% auto-fill feature.

Example: Let's take an image as an example


.wrap {
  width: 500px;
  height: 500px;
  border: 4px solid #0daabe;
  padding: 4px;
}
.img {

}

Result:

在这里插入图片描述
在这里插入图片描述667×662 83.5 KB


If we use fill-available for the image, the width of the test image will automatically fill the space, while not changing the original characteristics of the element.

.img {
  width: -webkit-fill-available;
}

Result:

在这里插入图片描述
在这里插入图片描述681×671 278 KB


2. min-content

2.1 Understanding the min-content property value

min-content width does not mean the container simply uses the smallest width among its internal elements. Instead, it takes the largest minimum width among all internal elements as the final width of the container. First, we need to understand what "minimum width" means. For example:

  • The minimum width of an image element is the default width of the image
  • For text elements: if it is all Chinese, the minimum width is the width of a single Chinese character; if it contains English, English words do not wrap by default, so the minimum width is the width of the longest English word

Example: 

  .wrap {
    width: 500px;
    /* height: 300px; */
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: min-content;
  }



  
敬天爱人

  
心不唤物,物不至helloworld

Result:

在这里插入图片描述
在这里插入图片描述671×259 30.8 KB


2.2 Usage Scenarios

When arranging text and images in a mixed layout, if you want the width of the text to not exceed the width of the image, you can use this property.

Example:


.wrap {
  width: 500px;
  /* height: 300px; */
  border: 4px solid #0daabe;
  padding: 4px;
}
.item {
  border: 4px solid #409eff;
  background: #fe731a;
  margin-bottom: 6px;
  width: min-content;
}



  

    
    你心中描画怎样的蓝图,决定了你将度过怎样的人生.强烈的意念,将作为现象显现请你首先铭记这个宇宙的法则

Result:

在这里插入图片描述
在这里插入图片描述670×417 137 KB


3. max-content

3.1 Understanding the max-content property value

max-content: Simply put, assuming the container has enough width and enough available space, the width it occupies is the size indicated by max-content.

That is, max-content uses the width of the widest internal element as the width of the container.

  • If the container only contains text, the text will not wrap, and the maximum width of the container is equal to the width of the entire text
  • If the container contains both text and images, the width of the widest element is used as the container width

3.2 Usage Example

When the text does not wrap, the container width equals the full text width

Example:


  .wrap {
    width: 500px;
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: max-content;
  }



  

    
    

      你心中描画怎样的蓝图,决定了你将度过怎样的人生.强烈的意念,将作为现象显现请你首先铭记这个宇宙的法则

Result:

在这里插入图片描述
在这里插入图片描述825×276 101 KB

If the text width is less than the image width, the maximum width of the container will be the image width: Result:

在这里插入图片描述
在这里插入图片描述672×337 95.2 KB


4. fit-content

4.1 Understanding the fit-content property value

width:fit-content can achieve the element shrink effect, and behaves the same as float, absolute, and inline-block

Although there are many ways to achieve wrapping characteristics now, they are all used in different scenarios. Similarly, we need to pay attention to what scenarios fit-content should be used in.


4.2 Usage Scenarios

For example, when we want to achieve horizontal centering, other wrapping elements have the following problems:

  • float can only float left or right, so it is definitely not suitable
  • Although absolute absolute positioning can achieve horizontal centering, its biggest disadvantage is that it takes the element out of the normal document flow
  • Horizontal centering of inline-block elements requires additional setting of text-align:center on the parent element

The more commonly used horizontal centering methods are absolute positioning, or margin: auto for block elements. But the problem with block elements is that we need to set a fixed width for the element, which means the width cannot adapt based on the content.

At this time, we can use fit-content: without modifying the characteristics of the block element, we can achieve that the container width adapts to the content width, gaining the wrapping characteristic.

Example:


  .wrap {
    width: 500px;
    /* height: 300px; */
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: fit-content;
    margin: auto;
  }



  

    
    
你心中描画怎样的蓝图

Result:

在这里插入图片描述
在这里插入图片描述665×328 95.5 KB


4.3 Difference from max-content

Difference between max-content and fit-content:

  • When the element width does not exceed the parent container width, the two behave the same
  • If the element width exceeds the parent container width, fit-content will have a maximum width equal to the parent container width, while max-content will overflow out of the container

Example: fit-content


  .wrap {
    width: 500px;
    border: 4px solid #0daabe;
    padding: 4px;
  }
  .item {
    border: 4px solid #409eff;
    background: #fe731a;
    margin-bottom: 6px;
    width: fit-content;
  }



  

    
    

      你心中描画怎样的蓝图,决定了你将度过怎样的人生.强烈的意念,将作为现象显现请你首先铭记这个宇宙的法则

Result:

在这里插入图片描述
在这里插入图片描述668×367 140 KB

If you modify it to use max-content , you can refer to the max-content example above for the effect.


5. Browser Compatibility Considerations

When using the fit-content property, we also need to consider browser compatibility. Currently, the fit-content property is widely supported by all major browsers, including Chrome, Firefox, Safari, and Edge, etc. However, please note that some older browser versions may not support this property or only support partial functionality.

This is a separate discussion topic separated from the original topic at https://juejin.cn/post/7368712423794245641