我在这里重现了一个我一直在面对的玩具例子
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;
不能覆盖that属性。谢谢
编辑:为了澄清,这是一个人为的例子。最初想要的结果是创建一个平滑的滚动网页,其中每个部分的高度等于视图高度减去导航栏,除非它不足以防止溢出或需要内容滚动。仅用min-height: calc(100vh - 80px);
就可以实现同样的结果。这个bug只是让我调查了一下为什么上面的例子中的代码没有产生相同的结果,并且似乎忽略了min-height
。
发布于 2022-01-08 08:20:31
来自规格
min-content
在相关轴中使用最小内容大小;对于一个框的块大小,除非另有规定,这相当于其自动大小。
然后是“自动大小”:
对于
min-width
/min-height
,指定一个自动最小大小。但是,除非相关布局模块另有定义,否则将解析为使用值0.。
因此,min-height: min-content
将决定采用min-height: 0
。换句话说,这是没有效果的。
https://stackoverflow.com/questions/70629269
复制相似问题