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

Question

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

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

如果我在没有供应商前缀的情况下执行此操作，或者以下任何一项都不起作用，则该样式会被删除：

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

他们都有一个通过它们的删除线。

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

更新：

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

score 2 · Accepted Answer

您在答案中编写的代码：

.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 宽度执行以下操作：

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

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

1 回答 1