CSS 最小最大值() : prioritize max value

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

你要找的是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%，因此从技术上讲它不会更大。如果您想在 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%之间增长和 70vmin