Html 溢出自动容器内的元素具有正确的宽度（所有组合的子元素）

我有一个固定宽度的包装器

，还有一个内部

，其中包含几个项目的列表，这些项目加起来比父项

宽

一旦内容变得比包装更宽，我就想要一个垂直滚动条

这工作得很好，但不幸的是，内部

的宽度与我的包装器div的宽度相同。列表项溢出内部

，但是当我为内部

设置背景色时，它仅在包装器的这个宽度上可见

我希望内部

与其子元素具有相同的宽度

有人知道如何解决这个问题吗

下面是一个示例代码：

。滑块包装器{
宽度：500px；
背景：灰色；
溢出：自动；
}
.滑动窗格{
背景：黄色；
填充：20px0；
}
保险商实验室{
保证金：0；
填充：0；
显示器：flex；
列表样式：无；
宽度：100%；
背景：红色；
}
李{
宽度：100px；
高度：自动；
填充：20px0；
弹性收缩：0；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,

从

ul

中移除

宽度：100%

（如果您希望元素宽度至少为100%，则替换为

min width

，而不是

flex

）

对于

div.slider-pane

，如果希望黄色也变大，请设置

display:inline block

。（如有必要，请再次添加最小宽度。）

。滑块包装器{
宽度：500px；
背景：灰色；
溢出：自动；
}
.滑动窗格{
显示：内联块；
背景：黄色；
填充：20px0；
}
保险商实验室{
保证金：0；
填充：0；
显示：内联flex；
列表样式：无；
最小宽度：100%；
背景：红色；
}
李{
宽度：100px；
高度：自动；
填充：20px0；
弹性收缩：0；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,

从

ul

中移除

宽度：100%

（如果您希望元素宽度至少为100%，则替换为

min width

，而不是

flex

）

对于

div.slider-pane

，如果希望黄色也变大，请设置

display:inline block

。（如有必要，请再次添加最小宽度。）

。滑块包装器{
宽度：500px；
背景：灰色；
溢出：自动；
}
.滑动窗格{
显示：内联块；
背景：黄色；
填充：20px0；
}
保险商实验室{
保证金：0；
填充：0；
显示：内联flex；
列表样式：无；
最小宽度：100%；
背景：红色；
}
李{
宽度：100px；
高度：自动；
填充：20px0；
弹性收缩：0；
}

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
十一,
十二,

我打算建议将

溢出：auto

添加到内部div（

.slider pane

）而不是

.slider wrapper

。这将保持外部div保持正确的大小，但是内部div将使用滑块正确溢出

---

如果您愿意，请看这支笔：

我打算建议将

溢出：auto

添加到内部div（

.slider pane

）而不是

.slider wrapper

）。这将保持外部div保持正确的大小，但是内部div将使用滑块正确溢出

---

如果你喜欢，看看这支钢笔：

谢谢你，伙计！就像一个符咒：）你能解释为什么它必须是内联块和内联flex吗？普通块只扩展到其父块的宽度，然后在它们内部发生溢出，内联块/内联flex的行为不同，它们允许元素按内容要求增长，不会导致内部溢出。@nonnnnn内联显示交叉，块显示向下-内联块是两者的组合，因此您可以通过+向下（它将根据宽度在较小的设备上进行调整）[用外行的话说]@nonnnnn注意这里不需要内联flex。上面的直列块就足够了。谢谢你！就像一个符咒：）你能解释为什么它必须是内联块和内联flex吗？普通块只扩展到其父块的宽度，然后在它们内部发生溢出，内联块/内联flex的行为不同，它们允许元素按内容要求增长，不会导致内部溢出。@nonnnnn内联显示交叉，块显示向下-内联块是两者的组合，因此您可以通过+向下（它将根据宽度在较小的设备上进行调整）[用外行的话说]@nonnnnn注意这里不需要内联flex。上面的内联块就足够了。