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

Question

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

.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; 无法覆盖高度属性的关键原因的答案。谢谢

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

Answer 1

来自the specification：

min-content

Use the min-content size in the relevant axis; for a box’s block size, unless otherwise specified, this is equivalent to its automatic size.

然后对于“自动大小”：

For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.

因此 min-height: min-content 将解析为 min-height: 0。也就是说，没有效果。

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

CSS: min-height: min-content fails to override height

css

responsive-design