CSS中如何让第二个类取消首个类已设置的属性值

你遇到的限制是CSS的固有规则：max-height 的权重高于 height，即使给元素设置了 height: 100%，只要存在数值更小的 max-height 规则，元素实际渲染高度仍然会被 max-height 限制，因此必须显式覆盖 max-height 规则才能实现需求。

你的现有方案是可行的：max-height: initial 会将该属性重置为浏览器默认初始值，而 max-height 的默认值就是 none，确实可以解除400px的最大高度限制。
不过如果追求更优的可维护性，更推荐直接写 max-height: none，原因有两个：

• 可读性更强：其他开发人员可以直接理解你是要主动取消最大高度限制，不需要额外回忆 initial 对应这个属性的默认值
• 兼容性覆盖更广：max-height: none 兼容包括IE9在内的所有现代浏览器，覆盖范围比initial略宽

优化后的代码如下：

.container {
  max-height: 400px;
  &.special {
    max-height: none;
    height: 100%;
  }
}

需要额外确认 height: 100% 的生效前提：该div的所有父级元素都必须有明确的高度定义，否则height: 100% 会无法按照预期生效，此时可以根据场景替换为 height: 100vh 或者使用flex布局的高度拉伸特性。

内容的提问来源于stack exchange，提问作者user15909643