css - 当百分比填充定义元素高度时忽略最大高度

Question

当内部填充大于最大高度值时，max-height 属性值似乎被忽略。例如，在元素上设置此类会导致忽略最大高度。

.max-height-ignored {
    height: 0; /* or auto, makes no difference */
    max-height: 40px;
    padding: 0 0 50% 50%;
}

demo here

在我的情况下，包装元素以防止溢出会很痛苦，我只是想知道这背后是否有不工作的原因。

Answer 1

最小/最大宽度/高度属性从不考虑任何其他框尺寸，无论是边框还是填充。它们只分别限制了 width 和 height 属性的使用值。 Section 10 of CSS2.1在文中没有明确提及最小/最大属性的边框或填充，但它确实引用了 width 和 height 属性，这两个属性都引用了内容维度。

如果您设置 height: 50px，该元素仍将被限制为 40px 的内容高度。然后填充从内容区域延伸。

不幸的是，box-sizing: border-box 似乎没有完全解决这个问题，至少当边框和/或填充超过宽度和高度时没有。

虽然我可以推断这是浏览器遵循规范的结果，但为什么规范是这样编写的，我无法客观地回答。鉴于填充和溢出裁剪可以一起工作，我认为这种行为的原因与溢出没有任何关系。