我创建了以下jsfiddle来可视化我的问题：https://jsfiddle.net/ch8r1z4q/1/

该图像显示了我创建的页面布局。黄色是侧边栏，蓝色是内容包装，绿色维护元素和白色子元素。红色是整个东西的包装，之所以显示是因为侧边栏已被切除。

我的问题是我需要将内容包装在蓝色包装纸中，因此不会显示读取部分，而是内容具有整个页面的宽度。这是为了避免在几页长的情况下浪费空间。

我的问题在于我的层次结构：

<div class="content">
    <div class="wrapper">
        <div class="element">
            <div class="subelement">
                text text texttext text texttext text texttext text text
            </div>
            <div class="subelement">
                text text texttext text texttext text texttext text texttext text text
            </div>
        </div>
        <div class="element">
            <div class="subelement">
                text text texttext text texttext text texttext text texttext text text
            </div>
            <div class="subelement">
                text text texttext text texttext text texttext text texttext text texttext
            </div>
        </div>
        <div class="element">
            <div class="subelement">
                text text texttext text texttext text texttext text texttext text texttext text text
            </div>
            <div class="subelement">
                text text texttext text texttext text texttext text texttext text texttext text text
            </div>
        </div>
    </div>
    <div class="sidebar">
        <!-- Some other info -->
    </div>
</div>

如果我只有蓝色包装纸，则可以将边栏作为浮动对象简单地放入包装纸，然后文本将被包装。但是我正在使用此元素/分块功能，但这种功能不提供那种自由度。是否有一些弹性解决方案，或其他解决方法可以达到期望的结果？

元素和子元素是动态的，因此恐怕没有硬编码的解决方案。