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

Question

minmax: If max < min, then max is ignored and minmax(min,max) is treated as min..

我想做类似

的事情

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

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

Answer 1

根据定义，这就是 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%;
}

Answer 2

你要找的是width/max-width这样的组合：

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

如果70vmin > 50%那么我们将至少有50%（我们的最小边界）并且我们不会超过70vmin
if 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%，因此从技术上讲它不会更大。如果你想在 70vmin 也更大的情况下大于 50%，你可以尝试以下组合：

.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% 和 [= 之间增长19=]

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

CSS minmax(): prioritize max value

css

grid

css-grid

minmax