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>

列印頁面