Html 如何在flexbox项目溢出时安排水平滚动条？

我试图安排一个布局，其中我有一个右手边栏，在它的左侧，在一个主要内容区域，我有一个固定宽度的项目列表水平排列

有各种数量的这些，当他们得到超过将适合在允许的空间，我希望一个水平滚动条出现

碰巧的是，此列表中的每个项目还包含一个标题和一个可能垂直溢出的子项目列表。这也需要一个滚动条

下面的jsbin显示了我正在尝试的内容，但在水平排列上失败了。不幸的是，侧边栏在滚动条出现之前被挤压到一个小宽度。而且，很明显，当我的主标题开始滚动时，整个视口都会显示水平滚动条

我如何才能使类为“s”的区域（参见jsbin）是水平滚动的区域？（它不必是“s”，我一开始试着让“ic”滚动，但失败了，所以添加了“s”，试图将弯曲和滚动分开）

正文{
全排气高度：100vh；
}
h{
显示器：flex；
弯曲方向：行；
证明内容：中心；
高度：30px；
}
m{
显示器：flex；
弯曲方向：行；
高度：计算（100vh-50px）；
边框：1px纯绿色；
}
.ic{
显示器：flex；
弹性：1；
}
s{
显示器：flex；
弯曲方向：行；
边框：1px纯红；
宽度：100%；
溢出-x：自动；
}
.我{
显示器：flex；
弯曲方向：立柱；
宽度：150px；
边框：1件纯色丽贝卡紫色；
保证金：1px
}
.ih{
高度：50px；
自对准：居中；
边框：1px实心橙色；
}
.il{
保证金：1px；
边框：1px纯黑；
溢出y：自动；
}
李先生{
高度：60px；
保证金：3倍；
边框：1px实心草坪；
}
某人{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
保证金：2倍；
边框：1px纯蓝色；
}

我的标题
项目标题
A.
B
C
项目标题
A.
B
C
C
C
C
C
C
C
项目标题
A.
B
C
项目标题
A.
B
C
项目标题
A.
B
C
一些内容
这应该对你有帮助。请检查全屏模式下的输出

检查以下代码段


.main容器{
显示器：flex；
边框：1px纯绿色；
溢出：自动；
}
.分项1{
显示器：flex；
边框：1px纯红；
flex：无；
宽度：100%；
利润率：20px；
}
.分项2{
利润率：20px；
边框：1px纯红；
弹性：1；
填充：90px；
}
.内容{
边框：1px纯色灰色；
利润率：10px；
}
.内容项{
边框：1px纯红；
利润率：20px；
高度：20px；
宽度：20px；
文本对齐：居中；
填充：50px；
}
我的标题
项目标题
A.
B
C
项目标题
A.
B
C
C
C
C
C
C
C
项目标题
A.
B
C
项目标题
A.
B
C
项目标题
A.
B
C
一些内容
这应该对你有帮助。请检查全屏模式下的输出

检查以下代码段


.main容器{
显示器：flex；
边框：1px纯绿色；
溢出：自动；
}
.分项1{
显示器：flex；
边框：1px纯红；
flex：无；
宽度：100%；
利润率：20px；
}
.分项2{
利润率：20px；
边框：1px纯红；
弹性：1；
填充：90px；
}
.内容{
边框：1px纯色灰色；
利润率：10px；
}
.内容项{
边框：1px纯红；
利润率：20px；
高度：20px；
宽度：20px；
文本对齐：居中；
填充：50px；
}
我的标题
项目标题
A.
B
C
项目标题
A.
B
C
C
C
C
C
C
C
项目标题
A.
B
C
项目标题
A.
B
C
项目标题
A.
B
C
一些内容
flex容器的初始设置为
flex-shrink:1
（）

因此，当容器变小时，允许
.i
元素（列）收缩

要禁用收缩功能，请使用弹性收缩：0

.i {
  display: flex;
  flex-direction: column;
  width: 150px;
  border: 1px solid rebeccapurple;
  margin: 1px
  flex-shrink: 0; /* NEW */
}

现在，水平滚动条在
.ic
容器上工作

.ic {
  display: flex;
  flex: 1;
  overflow-x: auto;
}


此处的更多详细信息：
flex容器的初始设置为
flex收缩：1
（）

因此，当容器变小时，允许
.i
元素（列）收缩

要禁用收缩功能，请使用弹性收缩：0

.i {
  display: flex;
  flex-direction: column;
  width: 150px;
  border: 1px solid rebeccapurple;
  margin: 1px
  flex-shrink: 0; /* NEW */
}

现在，水平滚动条在
.ic
容器上工作

.ic {
  display: flex;
  flex: 1;
  overflow-x: auto;
}


这里有更多详细信息：
谢谢-事实上，我刚刚在上面的jsbin克隆上试用过，现在可以删除“s”元素谢谢-事实上，我刚刚在上面的jsbin克隆上试用过，现在可以删除“s”元素