Html 超出窗口的背景溢出'；s宽度

我必须设计如下内容：

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

• 上述容器将在一个容器下渲染多次 另一个

---

• 页面应作为一个整体滚动，即滚动应位于包装器处 （具有类

  .overflow

  ）级别的div，而不是单个父级 水平

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

溢出{
溢出-x：自动；
}
.家长{
背景：#ccc；
边框：4px纯蓝色；
显示器：flex；
利润率：10px0；
}
.孩子{
显示：内联flex；
高度：50px；
背景：白色；
利润率：10px；
flex:10300px；
边框：2倍纯红；
}

1.
2.
3.
1.
2.
3.

删除溢出div

将父类css更改为

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

移除溢出div

将父类css更改为

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

---

将

inline flex

用于父级，并将

flex basis

替换为

width

溢出{
溢出-x：自动；
}
.家长{
背景：#ccc；
边框：4px纯蓝色；
显示：内联flex；
最小宽度：100%；/*以保持块行为*/
框大小：边框框；
利润率：10px0；
}
.孩子{
显示：内联flex；
高度：50px；
背景：白色；
利润率：10px；
宽度：300px；
弹性收缩：0；
柔性生长：1；
边框：2倍纯红；
}

1.
2.
3.
1.
2.
3.

将

内联弹性体

用于父级，并将

弹性体基础

替换为

宽度

溢出{
溢出-x：自动；
}
.家长{
背景：#ccc；
边框：4px纯蓝色；
显示：内联flex；
最小宽度：100%；/*以保持块行为*/
框大小：边框框；
利润率：10px0；
}
.孩子{
显示：内联flex；
高度：50px；
背景：白色；
利润率：10px；
宽度：300px；
弹性收缩：0；
柔性生长：1；
边框：2倍纯红；
}

1.
2.
3.
1.
2.
3.

您是否尝试过使用

：在
之前和
：在
之后？您是否尝试过使用
：在
之前和
：在
之后？“页面应该作为一个整体滚动，也就是说，滚动应该在包装（带有class.overflow的div）级别，而不是在单个父级。”页面应该作为一个整体滚动，即滚动应该在包装器（带有class.overflow的div）级别，而不是单个父级