The max-height property value seems to be ignored when the inner padding is greater than the max-height value. For example, setting this class on an element causes the max-height to be ignored.
当内部填充大于max-height值时，似乎忽略max-height属性值。例如，在元素上设置此类会导致忽略max-height。
.max-height-ignored {
height: 0; /* or auto, makes no difference */
max-height: 40px;
padding: 0 0 50% 50%;
}
在这里演示
In my situation, It would be a pain to wrap the element to prevent overflow and was just wondering if there was a reason behind this not working.
在我的情况下，包裹元素以防止溢出将是一个痛苦，只是想知道这背后是否有原因不起作用。
2 个解决方案
#1
8
The min/max width/height properties never take any other box dimensions into account, neither borders nor padding. They only constrain the used values of the width and height properties respectively. Section 10 of CSS2.1 does not explicitly mention borders or padding in the prose for the min/max properties, but it does refer to the width and height properties, both of which refer to content dimensions.
最小/最大宽度/高度属性永远不会考虑任何其他框尺寸，既不是边框也不是填充。它们仅分别约束宽度和高度属性的使用值。 CSS2.1的第10节没有在散文中明确提到min / max属性的边框或填充，但它确实引用了width和height属性，两者都引用了内容维度。
If you set height: 50px, the element will still be constrained to a content height of 40px. The padding then extends from the content area.
如果设置height：50px，则元素仍将被限制为40px的内容高度。然后填充从内容区域延伸。
Unfortunately, it appears box-sizing: border-box does not address this fully, at least not when the borders and/or padding are in excess of width and height.
不幸的是，它出现了盒子大小：border-box没有完全解决这个问题，至少在边框和/或填充超过宽度和高度时也是如此。
While I can infer that this happens as a result of browsers following the spec, why the spec was written this way I cannot answer objectively. Given that padding and overflow clipping can work together, I don't think the reason for this behavior has anything to do with overflow.
虽然我可以推断这是因为浏览器遵循规范而发生的，为什么规范是以这种方式编写的，我无法客观地回答。鉴于填充和溢出剪辑可以一起工作，我不认为这种行为的原因与溢出有关。
#2
4
It might be obvious, but as a work around, you might be able to limit the width of the wrapper using max-width. In my particular case, this required a max-width: 50vh (vh: percentage of viewport height).
这可能是显而易见的，但作为一种解决方法，您可以使用max-width限制包装器的宽度。在我的特殊情况下，这需要最大宽度：50vh（vh：视口高度的百分比）。
#1
8
The min/max width/height properties never take any other box dimensions into account, neither borders nor padding. They only constrain the used values of the width and height properties respectively. Section 10 of CSS2.1 does not explicitly mention borders or padding in the prose for the min/max properties, but it does refer to the width and height properties, both of which refer to content dimensions.
最小/最大宽度/高度属性永远不会考虑任何其他框尺寸，既不是边框也不是填充。它们仅分别约束宽度和高度属性的使用值。 CSS2.1的第10节没有在散文中明确提到min / max属性的边框或填充，但它确实引用了width和height属性，两者都引用了内容维度。
If you set height: 50px, the element will still be constrained to a content height of 40px. The padding then extends from the content area.
如果设置height：50px，则元素仍将被限制为40px的内容高度。然后填充从内容区域延伸。
Unfortunately, it appears box-sizing: border-box does not address this fully, at least not when the borders and/or padding are in excess of width and height.
不幸的是，它出现了盒子大小：border-box没有完全解决这个问题，至少在边框和/或填充超过宽度和高度时也是如此。
While I can infer that this happens as a result of browsers following the spec, why the spec was written this way I cannot answer objectively. Given that padding and overflow clipping can work together, I don't think the reason for this behavior has anything to do with overflow.
虽然我可以推断这是因为浏览器遵循规范而发生的，为什么规范是以这种方式编写的，我无法客观地回答。鉴于填充和溢出剪辑可以一起工作，我不认为这种行为的原因与溢出有关。
#2
4
It might be obvious, but as a work around, you might be able to limit the width of the wrapper using max-width. In my particular case, this required a max-width: 50vh (vh: percentage of viewport height).
这可能是显而易见的，但作为一种解决方法，您可以使用max-width限制包装器的宽度。在我的特殊情况下，这需要最大宽度：50vh（vh：视口高度的百分比）。