Question

我必须设计如下所示的东西：

一个带有'n'个孩子的父容器，这很可能超出了窗口的宽度，在这种情况下，页面应该滚动而不是换行下一行。
上面的容器将在下面的容器中多次渲染另一个。
页面应该整体滚动，即滚动应该在包装器处（级别为.overflow的div）级别，而不是单个父级级别。

在下面的代码段中水平滚动以查看行为。

.overflow {
  overflow-x: auto;
}

.parent {
  background: #ccc;
  border: 4px solid blue;
  display: flex;
  margin: 10px 0;
}

.child {
  display: inline-flex;
  height: 50px;
  background: white;
  margin: 10px;
  flex: 1 0 300px;
  border: 2px solid red;
}

<div class="overflow">
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
</div>

现在的问题是，父级上的灰色背景没有在超出窗口宽度的子级后面溢出。

如何实现这一目标（使所有子节点的.parent div背景溢出），并可能保留flex-box？

Answer 1

将inline-flex用作父项，并将flex-basis替换为width

.overflow {
  overflow-x: auto;
}

.parent {
  background: #ccc;
  border: 4px solid blue;
  display: inline-flex;
  min-width:100%; /*To keep the block behavior*/
  box-sizing:border-box;
  margin: 10px 0;
}

.child {
  display: inline-flex;
  height: 50px;
  background: white;
  margin: 10px;
  width:300px;
  flex-shrink:0;
  flex-grow:1;
  border: 2px solid red;
}

<div class="overflow">
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
  <div class="parent">
    <div class="child">
      1
    </div>
    <div class="child">
      2
    </div>
    <div class="child">
      3
    </div>
  </div>
</div>

Answer 2

删除溢出div

将您的父类CSS更改为

.parent {
  overflow-x: auto;
  background: #ccc;
  border: 4px solid blue;
  display: flex;
  margin: 10px 0;
}

超出窗口宽度的背景溢出

2 个答案: