超出窗口宽度的溢出背景

Question

我必须设计如下内容：

>

包含“n”个孩子的父容器很可能超出窗口的宽度，在这种情况下，页面应该滚动，而不是换行到下一行。

上面的容器将在另一个容器下面渲染多次。

页面应该作为一个整体滚动，即滚动应该在包装器（div with class. overflow）级别，而不是在单独的父级。

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

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

现在的问题是，父对象上的灰色背景不会溢出到窗口宽度以外的子对象后面。

如何实现这一点（使所有其子级的div后台溢出），并可能保留flex-box？

Answer 1

移除溢出div

将父类css更改为

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

Answer 2

使用inline-flex作为父节点，并将flex-base替换为宽

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