超出窗口宽度的溢出背景答案

【问题标题】：Overflow background beyond window's width超出窗口宽度的溢出背景
【发布时间】：2019-02-12 13:48:34
【问题描述】：

我必须设计如下：

具有“n”个孩子的父容器很可能超出窗口的宽度，在这种情况下页面应该滚动而不是换行下一行。
上面的容器会在一个下面多次渲染另一个。
页面应作为一个整体滚动，即滚动应位于包装器处 (div with class .overflow) 级别而不是单个父级级别。

在下面的 sn-p 中水平滚动以查看行为。

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

【问题讨论】：

你试过使用:before和:after吗？

标签： html css flexbox overflow

【解决方案1】：

移除溢出的div

将你的父类 css 更改为

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

【讨论】：

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

【解决方案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>

【讨论】：