移动子元素上的弹性项目的滚动

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> 

我不能发布我的代码...

正如你可以看到有内容＃内容-2 。 在这个内容中，有一个标题及其内容。

我想：

• 没有滚动的＃内容-2
• 卷轴上的内容＃2内容

我尝试，但没有解决方案。
也许，我必须添加一个新的柔性容器（＃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。