CSS：最小高度：最小内容无法覆盖高度答案

【问题标题】：CSS: min-height: min-content fails to override heightCSS：最小高度：最小内容无法覆盖高度
【发布时间】：2022-01-08 16:20:31
【问题描述】：

我在这里重现了玩具示例时遇到的问题

https://jsfiddle.net/958z6ckh/3/

.test{
  height: 5px;
  min-height: min-content;
  background: red;
  border: solid;
}

<div class="test">
  <div>
    testljalfdkajsfldjdsalfjdsalfxsdal
    asfsadfasdfslafjlskdjfklsdjfklslsf
    askdlfjdslkajflkdsajflktestljalfdk
    ajsfldjdsalfjdsalfxsdal
    asfsadfasdfslafjlskdjfklsdjfklslsf
    askdlfjdslkajflkdsajflk
  </div>
</div>
```

我发现了类似问题的解决方法，但没有找到解决 min-height: min-content; 无法覆盖 height 属性的关键问题的答案。谢谢

编辑：为了澄清，这是一个人为的例子。最初期望的结果是创建一个平滑滚动网页，其中每个部分的高度等于视图高度减去导航栏，除非它不足以防止溢出或需要滚动内容。只需min-height: calc(100vh - 80px); 即可获得相同的结果。该错误只是让我调查并空手而归，为什么上面示例中的代码不会产生相同的结果并且似乎忽略了min-height。

【问题讨论】：

我不明白为什么 height: auto; min-height: 5px（或其他）无法达到您想要的结果。
height: fit-content; 将确保元素中的所有内容依次适合到元素中，永远不会收缩变小比它的内容。
我在你的例子中没有看到height: calc(100vh - 80px);，这条规则在哪里？也许你可以调整你的代码片段来展示你是如何在你的代码中加入这个规则的？

标签： css responsive-design

【解决方案1】：

来自the specification：

min-content

在相关轴上使用最小内容大小；对于框的块大小，除非另有说明，否则这相当于其自动大小。

那么对于“自动大小”：

对于min-width/min-height，指定自动最小大小。但是，除非相关布局模块另有定义，它会解析为使用的值 0。

所以min-height: min-content 将解析为min-height: 0。换句话说，它没有任何效果。

【讨论】：