height、max-height、min-height 三方交战，为何最终高度却成了 min-height 的值？

height、max-height、min-height三方交战，各不相让

一个父元素拥有以下样式：

max-height: 100px;
height: 300px;
min-height: 200px;

然而，其最终高度却成了200px。这不禁令人疑惑，为何min-height生效了，父元素却没有自适应到子元素300px的高度？

背后的优先级之争

在height、max-height、min-height同时出现时，它们将按照以下优先级计算最终高度：

1. height与max-height比较，如果height大于max-height，max-height将成为新的height。
2. 上述计算得出的height与min-height比较，如果height小于min-height，min-height将成为最终的height。

按部就班的计算过程

在本例中，height为300px大于max-height为100px，因此height变为100px。

接着，100px的height与min-height为200px比较，发现height小于min-height，于是min-height成为最终的height，即200px。

总结

尽管min-height生效，但由于max-height的限制，父元素的高度无法超出200px。这是因为max-height和min-height同时生效时，优先级更高的max-height将对height施加上限。