css - 尝试使用内在尺寸值填充内容，但 chrome 不接受它

Question

我试图让一个 div 只适合使用固有大小的内容，但 chrome 开发工具似乎拒绝这种风格。

在开发工具中，该样式有一个删除线和一个带有感叹号的黄色三 Angular 形，就好像它是无效样式一样。'

如果我在没有供应商前缀的情况下执行样式，那么样式会被删除线，或者以下都不起作用:

.box{
    width:-moz-fit-content;
    width:-webkit-fit-content;
    width:fit-content;
}

它们都有删除线。

我做错了什么？我有最新版本的 Firefox 和 Chrome，它们应该支持这个。

更新:

这是我在 chrome 开发工具中看到的截图: http://cl.ly/image/1k0I21192Q36

Answer 1

您在答案中编写的代码:

.box{
    width:-moz-fit-content;
    width:-webkit-fit-content;
    width:fit-content;
}

应该可以正常工作。但是您屏幕截图中的代码:

div.container{
    height:-webkit-fit-content;
    height:fit-content;
}

不会工作。这是因为 fit-content 仅适用于宽度而不适用于高度。请参阅 Mozilla 开发人员网络以了解宽度和高度的工作值 - 宽度有更多可用方式: https://developer.mozilla.org/en-US/docs/Web/CSS/height

https://developer.mozilla.org/en-US/docs/Web/CSS/width

根据 MDN，适合内容宽度执行以下操作:

fit-content Experimental The larger of: the intrinsic minimum width the smaller of the intrinsic preferred width and the available width

因此对于高度，您可以期望 div 扩展其高度以适合其中的内容(除非内容是绝对定位或 float 的)。为了让它完成最后一部分(确保它不超过可用空间)，您可以根据 html 的结构添加 max-height:100%;。