Html 如何在嵌套的flex容器中创建具有固定宽度的水平可滚动内容？

我在嵌套列中有一些内容，其父级是嵌套的flex容器：

body，
html，
.集装箱{
身高：100%；
}
身体{
颜色：#fff；
}
.集装箱{
显示器：flex；
溢出：隐藏；
}
.侧边栏{
宽度：200px；
弹性收缩：0；
背景：红色；
}
梅因先生{
弹性：1；
显示器：flex；
}
.内容{
弹性：1；
背景：蓝色；
}
.卷轴{
溢出-x：自动；
}
.满溢{
宽度：1024px；
}
.小组{
宽度：100px；
弹性收缩：0；
背景：绿色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。非洛伦姆·布兰迪特，阿利奎特·奥古斯，埃古斯塔·里索斯。库拉比图尔·阿梅特·贾斯托·埃吉特·梅特斯·福西布斯·索达莱斯。前庭菱形自由帆。奎斯克·安特·夸姆（Quisque ante quam），梅特斯a的坦普尔（tempus），托托（tortor）的索尔利西托（aliquam sollicitudin）。Nam在sagittis nunc，et feugiat augue。奥古斯·拉库斯、马克西姆和同侧ac、莱塞拉特·蒂尼·里瑟斯。葡萄藤直径、发酵液量、ultricies elementum ipsum。我是多洛，我是塞姆佩尔，我是安特。Phasellus egestas dolor sed erat dapibus，一种箭矢对箭杖。佩伦特·维内纳蒂斯·尼西。前庭内侧，弓状体内侧，外侧。利奥发酵门，利奥前庭。Donec lobortis，tellus a aliquet malesuada，ipsum Elite sagittis lectus，sed mollis magna diam eu mauris。这是我的生日。

更新答案

这个问题的最初答案是不必要的复杂

简单的事实是，默认情况下，flex项是

minwidth:auto

。这意味着它们不能缩小到内容大小以下

这就是为什么水平滚动条不会在蓝色文本元素中呈现。内容无法溢出，因为项目始终在扩展以容纳其内容

解决方案是使用

min width:0

覆盖

min width:auto

.main {
   min-width: 0; /* NEW */
}

.content {
   min-width: 0; /* NEW */
}

详情如下：

---

原始答案

您在问题中描述的问题在Chrome47或IE11中不存在。代码预览，无论是小屏幕还是全屏，都会显示所有三个面板和水平滚动。它做你想要的

然而，在Firefox和Chrome48中，显然存在一个问题。没有水平滚动，右面板（绿色）在小预览中被推离屏幕

这些是Firefox和Chrome48中的bug。

以下是修复方法：

• 要在FF/Chrome 48中的flexbox中启用水平滚动条，请添加

  min width:0到滚动项目的父项

• （可选）要启用垂直滚动条，请添加

  最小高度：0

以上是一个跨浏览器的解决方案；它似乎对没有bug的浏览器没有任何影响。因此，将

minwidth:0

和

minheight:0

添加到生产代码中应该是可以的

body，
html，
.集装箱{
身高：100%；
}
身体{
颜色：#fff；
}
.集装箱{
显示器：flex；
溢出：隐藏；
}
.侧边栏{
宽度：200px；
弹性收缩：0；
背景：红色；
}
梅因先生{
弹性：1；
显示器：flex；
最小宽度：0；/*新*/
}
.内容{
弹性：1；
背景：蓝色；
最小宽度：0；/*新*/
}
.卷轴{
溢出-x：自动；
}
.满溢{
宽度：1024px；
}
.小组{
宽度：100px；
弹性收缩：0；
背景：绿色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。非洛伦姆·布兰迪特，阿利奎特·奥古斯，埃古斯塔·里索斯。库拉比图尔·阿梅特·贾斯托·埃吉特·梅特斯·福西布斯·索达莱斯。前庭菱形自由帆。奎斯克·安特·夸姆（Quisque ante quam），梅特斯a的坦普尔（tempus），托托（tortor）的索尔利西托（aliquam sollicitudin）。Nam在sagittis nunc，et feugiat augue。奥古斯·拉库斯、马克西姆和同侧ac、莱塞拉特·蒂尼·里瑟斯。葡萄藤直径、发酵液量、ultricies elementum ipsum。我是多洛，我是塞姆佩尔，我是安特。Phasellus egestas dolor sed erat dapibus，一种箭矢对箭杖。佩伦特·维内纳蒂斯·尼西。前庭内侧，弓状体内侧，外侧。利奥发酵门，利奥前庭。Donec lobortis，tellus a aliquet malesuada，ipsum Elite sagittis lectus，sed mollis magna diam eu mauris。这是我的生日。

太好了，非常感谢！