Question

我试图让div只适合使用内在大小调整的内容，但chrome dev工具似乎拒绝这种风格。

在开发工具中，该样式有一个穿透它，一个带有感叹号的黄色三角形，好像它是一个无效的样式。'

如果我在没有供应商前缀的情况下使用该样式，或者因此没有以下任何一种正在运行，那么该样式将获得通过：

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

所有人都通过他们进行了罢工。

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

更新

以下是我在chrome dev工具中看到的截图： 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

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

fit-content Experimental较大的：内在最小宽度固有的首选宽度和可用宽度中的较小者

因此，对于高度，您可以期望div扩展它的高度以适合其中的内容（除非内容绝对定位或浮动）。要使其完成最后一部分（确保它不超过可用空间），您可以添加max-height:100%;，具体取决于您的html结构。