CSS - max-content 属性

max-content 尺寸关键字表示内容的固有最大宽度或高度。这意味着它将元素的宽度设置为在溢出其容器之前可以达到的最大宽度。此属性将优先于任何其他宽度属性，并会自动调整以适应其容器。

当您需要内容的最大宽度来确定框的大小，max-content 关键字的使用是最佳的。

语法

/* Used as a length */
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/* used in grid */
grid-template-columns: 100px 1fr max-content;

CSS max-content - 盒尺寸

以下示例演示了使用max-content 设置框大小。

<html>
<head>
<style>
   #container {
      background-color: lightblue;
      padding: 10px;
      width: 250px;
   }

   .item {
      width: max-content;
      background-color: pink;
      padding: 5px;
      margin-bottom: 1em;
   }
</style>
</head>
<body>
   <h2>max-content - Example</h2>
   <div id="container">
      <div class="item">Item with smaller content</div>
      <div class="item">
         Item with more content in it which will overflow the fixed width of the container.
      </div>
      </div>
</body>
</html>

CSS max-content - 网格列尺寸

以下示例演示了使用max-content 设置网格列尺寸。

<html>
<head>
<style>
   #container {
      display: grid;
      grid-template-columns: max-content max-content 1fr;
      grid-gap: 5px;
      height: 200px;
      width: 100%;
      background-color: pink;
      padding: 10px;
      border: 2px solid black;
   }

   #container > div {
      background-color: lightskyblue;
      padding: 5px;
      border: 2px solid black;
   }
</style>
</head>
<body>
   <h2>max-content - Sizing grid columns</h2>
   <div id="container">
      <div>Item</div>
      <div>Column with flexible text and more than the other two columns.</div>
      <div>Item with more text in it.</div>
   </div>    
</body>
</html>

CSS max-content - 与图像一起使用

以下示例演示了使用max-content 与图像。

<html> 
<head> 
<style> 
   .card{ 
      width: max-content; 
      border: 1px solid black; 
   } 
</style> 
</head> 
<body> 
   <h1>max-content</h1> 
   <div class="card"> 
      <img src= "images/logo.png" alt="logo" /> 
      <h1>Tutorials Point CSS Reference</h1> 
   </div> 
</body> 
</html>

打印页面