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

Question

我正在寻找允许设置固定元素宽度的 CSS 规则（比方说 width: 500px），但如果容器比元素窄，则将其与 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

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

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

你在寻找相似的东西吗:

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

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

How to combine a min-width with a max-width that equals to 100% if needed in CSS?

html

javascript

css

width