考虑以下 HTML 和 CSS，如果任何子项（内容）的宽度大于 50%，我想将
.responsive-list<body>
<div class="responsive-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with a lot of content that might exceed 50</li>
<li>Item 4</li>
</div>
</body>
.responsive-list {
list-style-type: none;
min-width: 50%;
width: max-content; /* something like: if max-content > 50% then 100% else 50% */
}
.responsive-list li {
border: 1px solid #ddd;
margin: 5px 0;
}
仅使用 CSS 来实现所需的效果相当复杂且不完全可靠，因为 CSS 没有内置机制来根据超出初始渲染的子元素的大小有条件地设置父元素的宽度。但是，您可以使用 CSS 来近似这种行为，尽管如果内容在渲染后发生变化，它不会是动态的。
这是一种使用 CSS Grid 和 Flexbox 的方法，可以帮助您实现所需的结果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.responsive-container {
display: flex;
width: 100%;
}
.responsive-list {
list-style-type: none;
min-width: 50%;
width: max-content;
flex-grow: 1;
}
.responsive-list li {
border: 1px solid #ddd;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="responsive-container">
<ul class="responsive-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with a lot of content that might exceed 50%</li>
<li>Item 4</li>
</ul>
</div>
</body>
</html>在此方法中：