在 CSS 中，是否在所有浏览器中 min-height 总是优先于 max-height？

Question

我正在尝试确定哪个 CSS 属性优先 - min-height 或 max-height - 以及这是否在浏览器之间保持一致。

例如，请考虑以下情况：

.class{
  min-height:600px;
  max-height: 50vh;
}

如果浏览器视口的高度为 1000 像素，则最小高度 (600 像素) 将大于最大高度 (50vh = 500 像素)。我知道这是一个轻微的悖论，但完全有可能并且很有可能（除了编码最佳实践）。

从测试中我可以看到，最小高度优先，即使元素最终超过了最大高度 - 即元素呈现为 600 像素高，即使最大高度为 500 像素；

这是预期的标准化行为吗？或者这是浏览器供应商可以解释的东西，并且可能因浏览器或设备而异。

Answer 1

根据规格， “是”min-height始终是赢家：

以下算法描述了这两个属性如何影响“height”属性的使用值：

1. 暂定使用的高度是按照上面“计算高度和边距”下的规则计算的（没有“最小高度”和“最大高度”）。
2. 如果此暂定高度大于“max-height”，则再次应用上述规则，但这次使用“max-height”的值作为“height”的计算值。
3. 如果结果高度小于“min-height”，则再次应用上述规则，但这次使用“min-height”的值作为“height”的计算值。

正如您所看到的，这min-height是最后一个要进行的操作。我们首先计算没有最小/最大的高度。然后我们引入max-height可能会改变高度的计算值，最后我们对 做同样的事情min-height。

值得注意的是，同样的情况也发生在min-width ^ref上

据我所知，没有什么可以覆盖最小高度/宽度，即使是 Flexbox 的收缩功能也不能使元素收缩超过其最小高度/宽度。相关：为什么弹性项目仅限于父级尺寸？

还相关：min-width 和 max-width 具有相同的值？