Html 嵌套flexbox布局会导致可滚动区域行为不当

我读过关于在flexbox中滚动的各种问题，但我似乎有一个稍微复杂的版本。我有一个使用flexbox的编辑器，它包含一个工具栏，其中有许多可滚动的组件，而且它本身工作得很好。然而，在live站点上，它被包装在一个父级中，即

display:flex

（出于某些原因，我将不详细介绍，但该编辑器不是页面上的唯一组件），一旦编辑器放入该flex父级中，其可滚动区域将变为全宽，将整个页面推得比它应该的宽度更宽

在这个片段中，所有的“Thumb-Example”元素都应该可以在它们的父元素

中滚动。image-thumbs-container

考虑页面的整体

宽度：800px

限制，但是它们的布局和推进父元素的宽度都比这个要大。但是，如果您关闭

.product page

元素的

显示：flex

，那么滚动就会起作用。我构建了这个简化的编辑器示例来演示这个问题，它工作得很好，我花了一段时间才意识到是父元素导致了错误

[编辑]此代码段在StackOverflow中可能无法正常工作，请查看此相同的笔：

正文{
背景颜色：浅灰色；
}
.页面容器{
宽度：800px；
背景色：白色；
}
.产品页{
display:flex；/*禁用我使滚动工作*/
柔性包装：包装；
}
.上载容器{
文本对齐：左对齐；
空白：nowrap；
填充物：5px；
边框：1px纯黑；
显示器：flex；
框大小：边框框；
}
.上传滚动条{
溢出-x：滚动；
flex:1自动；
溢出y：隐藏；
}
.图像拇指容器{
边界：首字母；
}
.图像拇指{
显示：内联块；
宽度：100px；
边框：纯色2倍灰色；
边界半径：5px；
右边距：2px；
垂直对齐：顶部；
}

模型
页面包含flexbox布局所需的其他内容。
文件上传
小部件在这里
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
拇指
示例
这里有一些复杂的工作区内容。
页面包含flexbox布局所需的其他内容。

您只需在

.editor

上设置100%宽度即可解决此问题

因为父级已经有了

flex-wrap:wrap

，这对您来说应该很好。编辑器下方的内容将仅换行到其下方

---

.editor{/*您只需在
.editor
上设置100%宽度即可修复此问题

由于父级已经有了
flex-wrap:wrap
，这对您来说应该很好。编辑器下面的内容将仅包装到它下面


.editor{/*将
宽度：100%
添加到.editor元素中

或者，为了以防万一，将
max width:800px
添加到以下任何元素中…编辑器、.uploads container或.uploads container
将
width:100%
添加到.editor元素中

或者，如果您真的需要，可以将
max width:800px
添加到以下任何元素中……编辑器、.uploads container或.uploads container
非常好，这确实解决了问题。实际上，我有多个父母都有
display:flex
，所以我必须在两个位置设置
width:100%
，但都在上下文中xt是这个编辑器容器的一部分，不必弄乱
。产品布局
级别，所以一切都很好。非常感谢！太棒了，这确实解决了它。我实际上有多个父母都有
display:flex
，所以我必须在两个地方设置
宽度：100%
，但这都是在这个编辑器的合作范围内ntainer，不必干扰
。产品布局
级别，所以一切都很好。非常感谢！谢谢@BradTheBluefish..@cjl750比您先到一点，所以我接受了他们的答案，但您的答案也很重要。显然，在一切正常的情况下，将子元素设置为固定宽度并不可取从最上面的页面布局级别继承宽度，但是
宽度：100%
技巧奏效了。现在我只想弄清楚它为什么奏效：）谢谢@BradTheBluefish..@cjl750比你早一点到了那里，所以我接受了他们的答案，但你的答案也很值钱。显然，当e所有东西都应该从最顶层的页面布局级别继承宽度，但是
width:100%
技巧奏效了。现在我只需要弄清楚它为什么奏效：）