使div填充flexbox中剩余的*水平*空间

使div填充flexbox中剩余的*水平*空间

使用该

flex-grow

属性可以使d性项目消耗 主轴上的 可用空间。

此属性将尽可能扩展项目，调整长度以适应动态环境，例如调整屏幕大小或添加/删除其他项目。

常见的示例是

flex-grow: 1

或使用缩写属性

flex: 1

。

因此，请使用而不是

width: 96%

在您的div上

flex: 1

。

---

你写了：

因此，现在将其设置为96％，直到您真正按下屏幕为止，它看起来还可以-右div有点饿了它所需的空间。

固定宽度div的压缩与另一个flex属性有关：

flex-shrink

默认情况下，flex项目设置为

flex-shrink: 1

使它们能够收缩以防止容器溢出。

要禁用此功能，请使用

flex-shrink: 0

。