CSS 伪元素

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

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

语法

/* 使用长度 */
width: max-content;
inline-size: max-content;
height: max-content;
block-size: max-content;

/* 网格中使用 */
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= "/css/images/logo.png" alt="logo" /> 
      <h1>yxjc123.com CSS 属性</h1> 
   </div> 
</body> 
</html>