带有 overflow-x:auto 和 flex-grow:1 子项的 Flex-box

Question

我正在尝试用弹性框中的一些项目创建页眉。

其中一项是 div "box"，其中包含 flex-grow:1 以填充剩余的 space 行。

div "box" 有 overflow-x: auto 以在必要时创建水平滚动。

问题是，如果我不设置最大宽度，div "box" 的滚动不会出现，并且容器的某些项目会超出容器边界。 .

我想使用 flex-grow:1 使用的所有剩余 space。我该如何解决？

.container {
  display: flex;
  width: 400px;
  background-color: #fff;
}
.container > div {
  flex-shrink: 0;
}
.box {
  flex-grow: 1;
  border: 1px solid #ff0000;
  display: flex;
  overflow-x: auto;
  //max-width: 180px;

}
.scroll-box {
  overflow-x: auto;
  //  max-width: 180px;
  display: flex;
}
.box > div {
  flex-shrink: 0;
  width: 80px;
  border: 1px solid black;
  margin: 2px;
  padding: 2px;
}

<div class="container">
  <div>element1</div>
  <div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div>element 2</div>
  <div>element 3</div>
</div>

Answer 1

而不是 flex-grow: 1 使用 flex: 1.

当您使用 flex-grow 时，您设置了特定的属性。但其他 flexibility properties 保持其默认值。即 flex-shrink: 0 和 flex-basis: auto.

使用 flex: 1，您将切换到：

flex-grow: 1
flex-shrink: 1
flex-basis: 0

所以，盒子现在可以缩小了。但是，更重要的是，盒子的宽度不是 auto (content-driven)，而是从 0 开始。这就是启用滚动功能的原因。

带有 overflow-x:auto 和 flex-grow:1 子项的 Flex-box

Flex-box with child with overflow-x:auto and flex-grow:1

html

css

overflow

flexbox