css - 在子元素上移动 flex 元素的滚动

Question

我使用 flexbox 来设置我的布局。
我有一个 codepen.io 来简化我的问题:http://codepen.io/...

<div id="container">
    <div id="sidebar">...</div>

    <div id="content">
        <div id="content-1">...</div>
        <div id="content-2">      
            <div id="content-2-wrapper">
                <div id="content-2-header">
                  My content header
                </div>
                <div id="content-2-content">
                    ...
                </div>
            </div>
        </div>
  </div>  

</div>

我无法发布我的所有代码...

如您所见，内容#content-2。在这个内容中，有一个标题和它的内容。

我愿意:

• #content-2 上没有滚动
• 滚动#content-2-content

我尝试了，但没有解决方案。
也许，我必须添加一个新的 flex 容器 (#content-2-wrapper) 但没有成功

在此先感谢您的帮助!(我还在找)

Answer 1

从 #content-2 中删除 overflow-y: scroll 并添加 overflow: hidden。接下来，为 #content-2-content div 定义一个固定高度，并将其 overflow 设置为 scroll，如下所示:

#content-2-content {
    height: 290px;
    overflow-y: scroll;
}

这是 CodePen 的链接.