Css div中div中的内容，内部div宽度不为'；伸展

我有以下结构：

<div name="outerContainer" style = "background: green; overflow: auto">
    <div name = "innerContainer" style = "background: red">
        <div name = "content" style = "width: 150%; height: 20px"/></div>
    </div>
    <div name = "innerContainer" style = "background: yellow">
        <div name = "content" style = "width: 120%; height: 20px"></div>
    </div>
</div>

结果是，红色和黄色div将覆盖其内容最初可见的部分，但是，当向右滚动时，它们的内容溢出（隐式溢出：可见），但它们保留100%的宽度。 为了使红色和黄色的innerContainer div覆盖其全部内容，我需要更改什么

内容div应该具有动态长度，并且可以被任何其他元素替换。在这种特殊情况下，只需为其容器指定内容div的宽度就可以解决此问题，但如果内容是没有定义宽度的元素，则无法解决此问题。

请尝试：

HTML:

---

为什么使用高于100的百分比？您到底想要什么？我是说有什么问题？这就是你想要的吗<代码>内容分区，

间隔分区

…这些分区是哪些分区？？？…至少在代码中添加注释以识别！！还有一个非常不清楚的问题……您的标记逻辑无效，请检查此项，并且div不是自动关闭标记。也许我应该澄清一下，最里面的div只是用来表示随机内容的，用longlonglonglonglonglong或其他什么替换它。

<div style = "background: green; overflow: auto;">
    <div class="child" style = "background: red">
        <div style = "height: 20px"></div>
    </div>
    <div class="child" style = "background: yellow">
        <div style = "height: 20px"></div>
    </div>
</div>

.child{width:120%;}
.child:first-child{width:150%;}