Html 如何将可滚动Div2中Div1的宽度动态更改为Div2'；s宽度

如何将可滚动Div2中Div1的宽度动态更改为Div2的宽度。 检查这个Jsfiddle 您将看到绿色背景在1点处停止（默认宽度大小）。 我想让绿色背景的div扩展到整个可滚动的div

重要要求，文本不得更改，必须保持在一行内

有人有简单的解决办法吗？ 我能想到的复杂的解决方案是可滚动的，宽度为1000%，不可滚动时为默认值/100%。使用@media

HTML

这是代码：（）

#内容{
空白：nowrap；
背景：绿色；
}
#容器{
保证金：0自动；
宽度：90%；
溢出：自动；
单词包装：打断单词；
}

你好

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

可能会有更好的答案，但它正在发挥作用。只需添加

display:table

到

#容器

好的，我找到了一个解决方案

包装容器并应用

float:left

这将是问题的解决方案，但是，如果您想扩展第一个div的背景色，而不是将文本放入屏幕，只需使用固定长度和溢出：隐藏以删除额外文本额外文本非常重要！并且文本需要在1行中。尼斯解决方案变大。您将添加显示：表格；给父母。在我的变体中，它是容器。在您的中有两个父项：#container和#container1。只需添加display:table；到#container1，它与其余元素一起滚动。。。滚动应该只发生在具有绿色背景和文本垃圾邮件的div中。我更改了float:left和display:inline块，因为div之外的其他元素以某种方式获得了背景？？？将测试我有空时为什么要为社区做贡献。@JaredT因为
float:left
您可以使用
clear:both
添加一个div来解决此问题。像这个：
<div id="container" style="overflow:auto">
<div id="content">
    Well hello
</div>
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>  

#content{
white-space:nowrap;
background:green;
}