具有嵌套可滚动子元素的CSS Flexbox

Question

尝试在flexbox中获得对孙子的水平滚动。 SVG内容以各种宽度创建，并添加到“ svg容器”中。如果它大于视图区域+侧边栏，则应为“ svg容器”创建一个滚动条，但是它只是扩展父级“内容”以补偿“ svg内容”的宽度。

我正在使用flexbox，因为侧边栏是可折叠的，并且从200px变为80px，并且正在寻找根据侧边栏大小进行调整的“内容”。尝试了几件事，包括“ overflow-y：hidden;”。不能满足“内容”要求。

<div id="row" style="display: flex; width: 1000px;">
    <div id="sidebar" style="min-width: 200px; background-color: red;">
        sidebar
    </div>
    <div id="content" style ="flex: 1; background-color: blue; padding: 50px;">
        <div id="svg-container" style="overflow:scroll;">
            <div id="svg-content" style="width: 1200px; background-color: green;">VARIABLE WIDTH SVG</div>
        </div>
    </div>
</div>