固定フレックスボックスのサイドバーでスクロール可能なコンテンツ

Question

どういうわけかスクロールバーの作業を取得できません。

https://jsfiddle.net/rafuw31g/2/

あなたがいる場合#scrollable何とか柔軟なコンテンツオーバーフローブラウザの高さのコンテンツをコピー、貼り付け、#bottomが消えます。

#sidebar { 
 
    box-shadow: 1px 0 0 0 rgb(25, 25, 25); 
 
    background-color: rgb(45, 45, 45); 
 
    position: fixed; 
 
    width: 250px; 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column 
 
} 
 
#sidebar > header { 
 
    border-bottom: 1px solid rgb(25, 25, 25); 
 
    background: url('http://puu.sh/prf5M/2b91e2fea8.png') no-repeat 0 0 transparent; 
 
    height: 100px; 
 
    width: 250px; 
 
} 
 
#sidebar > header a { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    cursor: pointer; 
 
} 
 
#sidebar > section#top { 
 
    background-color: rgb(25, 25, 25); 
 
    height: 35px; 
 
    width: 100%; 
 
    line-height: 35px; 
 
    text-align: center; 
 
} 
 
#sidebar > section#top::after { 
 
    display: block; 
 
    content: ''; 
 
    clear: both; 
 
} 
 
#sidebar > section#top a { 
 
    float: left; 
 
    cursor: pointer; 
 
    width: 125px; 
 
    color: rgb(175, 175, 175); 
 
    text-decoration: none; 
 
} 
 
#sidebar > section#top a:hover { 
 
    background-color: rgb(33, 33, 33); 
 
    color: rgb(200, 200, 200); 
 
} 
 
#sidebar > section#top a:first-child, 
 
#sidebar > section#top a:first-child:hover { 
 
    background-color: rgb(45, 45, 45); 
 
    color: rgb(225, 225, 225); 
 
    cursor: default; 
 
} 
 
#sidebar > section#scrollable { 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
    flex: 1; 
 
    min-height: 50px; 
 
} 
 
#sidebar > section#scrollable:hover { 
 
    overflow-y: scroll; 
 
} 
 
#sidebar > section#scrollable a { 
 
    display: block; 
 
    height: 50px; 
 
    line-height: 50px; 
 
} 
 
#sidebar > section#bottom { 
 
    position: relative; 
 
    width: 100%; 
 
    bottom: 0; 
 
    border-top: 1px solid rgb(25, 25, 25); 
 
    text-align: center; 
 
    padding: 10px 0; 
 
}

<div id="sidebar"> 
 
    <header> 
 
    <a></a> 
 
    </header> 
 
    <section id="top"> 
 
    <a>Tab 1</a> 
 
    <a>Tab 2</a> 
 
    </section> 
 
    <section id="scrollable"> 
 
    <a> 
 
     <span>Lorem ipsum dolor sit amet</span> 
 
    </a> 
 
    </section> 
 
    <section id="bottom"> 
 
    <a>Impressum</a> 
 
    </section> 
 
</div>

Answer 1

あなたがスクロール可能な領域にコンテナを追加することができますスタイルで

<section id="scrollable"> 
    <div class="content"> 
... 

：

#sidebar > section#scrollable { 
    flex: 1; 
    min-height: 50px; 
    position: relative; 
} 
#sidebar > section#scrollable:hover > .content { 
    overflow-y: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

jsFiddle

Answer 2

私はあなたがする必要があるすべてはあなたのスクロール可能なセクションに、いくつかの最大の高さを追加することだと思います。この方法では、スクロールバーがいつ開始するかをdivが知っています。

#sidebar > section#scrollable { 
    overflow-x: hidden; 
    overflow-y: hidden; 
    flex: 1; 
    min-height: 50px; 
    max-height: 100px; 
} 

https://jsfiddle.net/rafuw31g/3/