超出 window 宽度的溢出背景

Question

我必须设计如下内容：

一个包含 'n' 个子容器的父容器 window 的宽度，在这种情况下页面应该滚动而不是换行下一行。
上面的容器会在一个下面渲染多次另一个.
页面应该作为一个整体滚动，即滚动应该在包装器处 (div with class .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>

现在的问题是父级的灰色背景没有超出 window 的宽度超出子级。

如何实现这一点（使其所有子项的 .parent div 背景溢出）并可能保留 flex-box?

Answer 1

消除溢出div

将您的 parent class css 更改为

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

Answer 2

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

超出 window 宽度的溢出背景

Overflow background beyond window's width

html

css

overflow

flexbox