内容的固有最大宽度或高度由大小调整关键字 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>Qikepu.Com CSS Reference</h1>
</div>
</body>
</html>
