CSS minmax()：优先考虑最大值

Question

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

我想做类似的事情

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

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

Answer 1

width您正在寻找的是/的组合，max-width如下所示：

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

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

您可以使用简单的 div 和 来实现此目的margin:auto。不需要网格：

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

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

在上面的示例中，我们将宽度固定为 50%，因此从技术上讲它不会更大。如果您想要大于 50%，同时70vmin也更大，您可以尝试以下组合：

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

.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;
}

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