CSS minmax（）：优先考虑最大值

Question

minmax： 如果max < min，则忽略max，minmax(min,max)将被视为min。

我想要做类似于

grid-template-columns: 1fr minmax(50%, 70vmin) 1fr;

我不希望该列超过 70vmin。根据规范，在出现 70vmin 小于 50% 的情况下，会选择 50% 作为列宽大小，而这并不是我想要的。是否有可能以某种方式反转这种行为？

- Alex Chashin

Answer 1

你所要寻找的是以下这种 width/max-width 的组合：

width:50%;
max-width:70vmin;

• 如果70vmin > 50%，那么我们将至少有50%（我们的最小边界），并且不会超过70vmin
• 如果70vmin < 50%，那么我们的宽度将等于70vmin（我们抑制最小值的最大边界）

您可以使用简单的div和margin:auto来实现这一点。无需使用网格：

.grid-item {
  max-width: 70vmin;
  width: 50%;
  height: 50px;
  margin:auto;
  background: red;
};

 <div class="grid-item"></div>

在上面的例子中，我们将宽度固定为50％，因此在技术上它不会更大。如果您想要比50％更大的尺寸，并且70vmin也更大，您可以尝试以下组合：

.grid-container {
  display:flex;
  justify-content:center;
  margin:20px 0;
}

.grid-item {
  max-width: 70vmin;
  flex-basis:50%;
  height: 50px;
  background: red;
  
  white-space:nowrap;
}

<div class="grid-container">
  <div class="grid-item"> some text</div>
</div>

<div class="grid-container">
  <div class="grid-item"> some text some text some text some text some text some text some text some text some text</div>
</div>

我们使用flex-basis设置初始宽度至少为50%，我们固定max-width，内容可以使元素在50%和70vmin之间增长

- Temani Afif

Answer 2

"最初的回答"翻译成中文即为"Original Answer"。

那就是按照定义使用minmax()函数。所以尝试其他方法。

不要这样做：

grid-container {
    grid-template-columns: 1fr minmax(50%, 70vmin) 1fr
}

考虑以下内容：

grid-container {
    grid-template-columns: 1fr auto 1fr
}

grid-item {
    max-width: 70vmin;
    min-width: 50%;
}

- Michael Benjamin

---

如果我没错的话，min-width比max-width更强大，所以如果70vmin小于50％，那么50％也将适用于此处：https://jsfiddle.net/n6gyrzb4/ - Temani Afif

Answer 3

尝试以下更简单的解决方案之一：

grid-template-columns: 1fr minmax(min(50%, 70vmin), 70vmin) 1fr;

或者在非网格情况下：

.class {
  min-width: min(50%, 70vmin);
  max-width: 70vmin;
}

它明确使用min()函数确保最小值永远不会大于最大值。并且在可能的情况下仍允许内容将其宽度设置为介于两者之间的某个值。

- tsmigiel