-webkit-fill-available 的用法是什么？

Question

PIC-1

这就是我的（图1）

PIC-2

这就是我需要的（图2）

在图2中我添加了

width: -webkit-fill-available;

我得到了我所期望的。但我不知道它是如何工作的。

Answer 1

因此，您需要了解两件事：

 -webkit-fill-available;

-webkit 部分是 safari 或 chrome 等浏览器的扩展，您可以在这里找到更多示例：https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions 这意味着这段代码在 Firefox 中不起作用，要覆盖您可以使用类似内容的所有浏览器：

elem {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

“填充可用”部分意味着元素将扩展以占据其容器中的所有可用空间。这就是为什么你的线拉长了。

希望我能为您解决问题。

Answer 2

我建议更现代的解决方案是使用

fit-content

代替。

请参阅 MDN fit-content 和 我可以使用 fit-content

请注意，在撰写本文时，我可以使用指出三星互联网仍然需要

-webkit-fill-available

才能使用

min-width

。