Javascript 添加新的子元素时，父容器仅将子元素包装到屏幕边缘（首选IE 11支持）

我正在处理一个待办事项列表，列表水平放置。每个列表顶部都有一个标题，列表垂直溢出

我有一个带有y形滚动条的容器，当标题固定在顶部时。此外，我可以水平添加新列表。当x轴向右滚动时，整个页面都会滚动，因此页眉与列表保持对齐

问题：当我向右滚动以查看溢出时，滚动条不会延伸到新的宽度，从而导致新的子元素，并向左移动。容器的最大宽度保持在屏幕宽度（例如1920像素）。新的列表元素保持隐藏状态

请查看此进行可视化。如您所见，滚动条保留在

content 5

后面，而

content 6

和

content 7

被隐藏

我尝试过各种css属性，如浮动和清除等。固定宽度对我来说不行

唯一有效的方法是使用Javascript/JQuery动态计算新的宽度，但在更宽的列表容器上，y形滚动条对用户隐藏。我希望滚动条始终可见

。标题包装器{
显示器：flex；
背景：白烟；
文本对齐：居中；
}
.列表包装器{
显示器：flex；
背景：白烟；
文本对齐：居中；
溢出y：滚动；
溢出x：隐藏；
身高：80%；
}
.标题{
最小宽度：200px；
边框底部：1px纯色灰色；
}
.名单{
最小宽度：200px；
右边框：1px实心浅灰色；
底部边框：3倍纯色橙色；
背景：钢蓝；
颜色：白色；
高度：1000px；
}
.外部{
排名：0；
左：0；
右：0；
底部：0；
溢出y：隐藏；
溢出-x：滚动；
位置：绝对位置；
}

标题1
标题2
标题3
标题4
标题5
标题6
标题7
内容1
内容2
内容3
内容4
内容5
内容6
内容7

问题是您的类

.outer

的固定宽度为

1000px

。 超出此

1000px

的所有内容都不会显示

---

删除

.outer

类的宽度对我来说很有效。

您可以添加一个额外的包装，该包装的宽度与溢出内容的宽度相同：

。标题包装器{
显示器：flex；
背景：白烟；
文本对齐：居中；
}
.列表包装器{
显示器：flex；
背景：白烟；
文本对齐：居中；
溢出y：滚动；
溢出x：隐藏；
身高：80%；
宽度：100%；
}
.标题{
最小宽度：200px；
边框底部：1px纯色灰色；
}
.名单{
最小宽度：200px；
右边框：1px实心浅灰色；
底部边框：3倍纯色橙色；
背景：钢蓝；
颜色：白色；
高度：1000px；
}
.外部{
排名：0；
左：0；
右：0；
底部：0；
溢出y：隐藏；
溢出-x：滚动；
位置：绝对位置；
}
.中级{
显示：inline block；/*使其宽度为内容的宽度*/
身高：100%；/*使孩子的身高百分比仍然有效*/
垂直对齐：顶部；/*以减轻内联定位可能产生的瑕疵*/
}

标题1
标题2
标题3
标题4
标题5
标题6
标题7
内容1
内容2
内容3
内容4
内容5
内容6
内容7

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。请参阅从

.lists wrapper

@temaniaf移除过流，如果这会移除列表滚动条或破坏与标题的对齐，则会移除

.outer

的x滚动条。只有小提琴结果框才会滚动。我对Fiddle做了一些小改动，您可以添加

width:fit内容到
。列出包装器
。但并非所有浏览器都支持此css功能：请看，我确实需要它来为IE11工作，但优先级较低
fit content
在这里似乎有效，但在我的完整代码中却不起作用。我需要注意浮动元素、位置或弹性项等其他属性吗？浮动元素或类似属性肯定是个问题，但如果没有代码，我真的说不出来。我在这里找到了不同之处。我有
flex:0270px
。当我给出元素
minwidth:270px
时，它的行为与预期的相同。效果很好。还有一个问题：你有没有办法让y形滚动条始终保持在屏幕的右边缘？