百分比填充定义元素高度时忽略max-height

Question

当内部填充大于max-height值时，似乎忽略max-height属性值。例如，在元素上设置此类会导致忽略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属性，这两个属性都引用了内容维度。 / p>

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

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

虽然我可以推断这是因为浏览器遵循规范而发生的，为什么规范写这样我无法客观地回答。鉴于填充和溢出剪辑可以一起工作，我不认为这种行为的原因与溢出有关。

Answer 2

这可能很明显，但作为一种解决方法，您可以使用max-width限制包装的宽度。在我的特定情况下，这需要max-width: 50vh（vh: percentage of viewport height）。