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

Question

我正在尝试用 flex-box 中的一些元素创建一个标题。

其中一项是带有 flex-grow:1 的 div“框”，用于填充该行的剩余空间。

div“框”有 overflow-x: auto 以在必要时创建水平滚动。

问题是，如果我不设置最大宽度，则不会出现 div“框”的滚动，并且容器的某些元素会超出容器边界...

我想使用 flex-grow:1 使用的所有剩余空间。我该如何解决这个问题？

JSFiddle

.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: 1 而不是 flex-grow: 1。

---

当您使用 flex-grow 时，您设置了那个特定的属性。但另一个flexibility properties保留它们的默认值。即，flex-shrink: 0 和 flex-basis: auto。

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

• flex 增长:1
• flex-shrink: 1
• flex 基础:0

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