Question

我试图在弹性框中创建包含某些项目的标题。

其中一项是div＆＃34; box＆＃34;使用flex-grow：1来填充线的剩余空间。

div＆＃34; box＆＃34;如有必要，可以使用overflow-x：auto来创建水平滚动。

问题在于，如果我没有设置最大宽度，则可以滚动div＆＃34;框＆＃34;没有出现，容器的某些项目超出容器范围......

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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（内容驱动）的宽度，而是从0开始。这是启用滚动功能的原因。

带有溢出x的孩子的柔性盒：自动和柔性生长：1

1 个答案: