如果CSS中需要，如何将最小宽度与等于100%的最大宽度相结合

Question

我正在寻找允许设置固定元素宽度(比如width: 500px(的CSS规则，但如果容器比元素窄，则将其与max-width: 100%组合。

我在想类似的东西：

.elem {
width: 600px;
max-width: 100%;
}

这个片段非常有效——如果.elem的容器比.elem本身窄，则.elem的容器宽度比600px小。

如何与min-width实现相同的效果？以下片段不起作用：

.elem {
min-width: 600px;
max-width: 100%;
}

也许有什么使用CSS网格甚至JavaScript的想法吗？

Answer 1

你在寻找相似的东西吗：

body {
margin: 0;
}
div {
/* demo purpose */
width: 90%;
margin: auto;
padding: 1em;
border: solid;
/* flex optionnal */
display: flex;
flex-wrap: wrap;
gap: 1em;
}
button {
min-width: clamp(320px, 600px, 100%);
}

<div class>
<button>hello</button>
<button> hello hello hello</button>
<button> hello hello hello hello hello hello hello hello hello hello hello hello</button>
</div>

320px(可以是0到X(是您同意的最小宽度，600px是您允许的最大宽度，100%是不通过的限制。

这是一支可以测试和玩的钢笔：https://codepen.io/gc-nomade/pen/bGqyJmL

Answer 2

在这种情况下，它似乎是clamp(MIN、VAL、MAX(。clamp((CSS函数将一个值夹在上限和下限之间。clamp((允许在定义的最小值和最大值之间的值范围内选择一个中间值。它需要三个参数：最小值、首选值和允许的最大值。clamp((函数可以用于任何允许长度、频率、角度、时间、百分比、数字或整数的地方。

clamp(MIN，VAL，MAX(解析为MAX(((MIN，MIN(((VAL，MAX

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp((

Answer 3

min-width无法覆盖您编写的代码中的width，我认为这与@dantheman相同。您可能正在查找width: 100%; max-width: 600px min-width: 320px。它将占用整个容器，但不高于600px，也不小于320px。