-webkit-fill-available 有什么用？

PIC-1

这就是我所拥有的（图1）

PIC-2

这就是我需要的（图2）

在pic-2中我添加了

width: -webkit-fill-available;

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

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

 -webkit-fill-available;

-webkit 部分是 safari 或 chrome 等浏览器的扩展，您可以在这里找到更多示例：https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions 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;
}

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

希望我能为你解决这个问题。