하위 요소의 flex 항목 스크롤하기

Question

flexbox를 사용하여 레이아웃을 설정합니다. 당신이 볼 수 있듯이 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> 

내 모든 코드를 게시 할 수 없습니다 ...

콘텐츠 #의 내용이 있습니다 :
나는 내 문제를 단순화하기 위해 codepen.io이 . 이 콘텐츠에는 제목과 내용이 있습니다.

내가 좋아하는 것 :

• 없이 스크롤을 # 내용-2
• 스크롤에 # 내용-2-내용

내가 시도

하지만 솔루션.
어쩌면 새로운 플렉스 컨테이너 (content-2-wrapper)를 추가해야하지만 성공하지 않아도됩니다.

미리 도움을 청하십시오! (아직보고 있습니다)

Answer 1

overflow-y: scroll을 #content-2에서 삭제하고 대신 overflow: hidden을 입력하십시오. 다음, #content-2-content DIV에 대한 고정 높이를 정의하고 overflow이 같은 scroll로 설정 :

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

여기 CodePen에 대한 링크의를.