Исправлена ​​прокрутка левого меню, не работающая?

Question

Я сделал следующий demo on Codepen. Проблема заключается в том, что высота видового экрана уменьшена, а прокрутка отображается, которую я хочу, но логотип скрыт в списке значков, что является нежелательным поведением. Все работает правильно, если высота видового экрана достаточно.

<input type="checkbox" id="menu-expander" name="ert"> 
<div class="main-menu-container"> 

<div class="logo-area"> 
    <div class="logo"><img src="http://extensiondl.maxthon.com/skinpack/11018970/1375652328/icons/icon_32.png"></div> 

</div> 

<ul class="sidebar-icon-list"> 
    <li class="sidebar-icon"> 
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png"> 
    <span>Week</span> 
    </li> 
    <li class="sidebar-icon menu-active"> 
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png"> 
    <span>Projects</span> 
    </li> 
    <li class="sidebar-icon" title="Life"> 
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png"> 
    <span>Life</span> 
    </li> 

    <li class="sidebar-icon"> 
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png"> 
    <span>Analysis</span> 
    </li> 
    <li class="sidebar-icon"> 
    <img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png"> 
    <span>Projects</span> 
    </li> 
</ul> 

<div class="sidebar-wt"> 
    <label for="menu-expander"><img src="https://cdn3.iconfinder.com/data/icons/awesome-lineca-vol-1/17/angle-right-128.png"></label> 
</div> 
<div class="user-area"> 
    <div class="user-pic"></div> 
</div> 

CSS

input[name="ert"] { 
    position: absolute; 
    opacity: 0; 
    width: 0; 
    height: 0; 
    overflow: hidden; 
} 

/* Main Menu Contaier */ 
.main-menu-container { 
    width: 6em; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    background-color: hsl(207,6%,12%); 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
    z-index: 100; 
    border-right: 1px solid black; 
    transition: width 0.2s ease-in; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

input[name="ert"]:checked + .main-menu-container { 
    width: 12em; 
    transition: width .3s linear; 
} 


/* Logo Area */ 
.logo-area { 
    height: 6em; 
    background-color: #fff; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 

.logo { 
    height: 4em; 
    width: 4em; 
} 

.logo img { 
    height: 4em; 
    width: 4em; 
} 

/* Icon List */ 

.sidebar-icon-list { 
    display: flex column; 
    list-style: none; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    flex-grow: 1; 
} 

.sidebar-icon { 
    color: #eaeaea; 
    width: 100%; 
    border-left: 3px solid hsl(207,6%,12%); 
    height: 3em; 
    margin: 1em 0; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    position: relative; 
    transition: all 0.3s linear; 
} 

.sidebar-icon:hover { 
    color: #fff; 
    border-left: 3px solid #EEFF22; 
} 

.sidebar-icon img { 
    color: #fff; 
    width: 2em; 
    height: 2em; 
} 

.sidebar-icon span { 
    font-size: 0.75em; 
    opacity: 0; 
    position: absolute; 
    transition: all 0.1s linear; 
} 

input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon { 
    flex-direction: row; 
    justify-content: flex-start; 
    padding-left: 1em; 
    transition: all 0.3s linear; 
} 

input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon span { 
    font-size: 0.75em; 
    opacity: 1; 
    position: relative; 
    transition: all 0.3s linear; 
    margin-left: 1em; 
} 

.menu-active { 
    border-left: 3px solid #EEFF22; 
    color: #EEFF22; 
} 

/* Sidebar Expander */ 

.sidebar-wt { 
    display: flex; 
    justify-content: flex-end; 
} 

.sidebar-wt label img { 
    height: 1.5em; 
    width: 1.5em; 
    cursor: pointer; 
} 

.main-menu-container .sidebar-wt label img { 
    transition: all 0.3s linear; 
} 

input[name="ert"]:checked + .main-menu-container .sidebar-wt label img { 
    transform: rotateZ(180deg); 
    transition: all 0.3s linear; 
} 

/* USer Area at Bottom */ 

.user-area { 
    height: 4em; 
    background: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

.user-pic { 
    width: 100%; 
    height: 5em; 
    border-bottom: 2px solid #2ca58d; 
    background-image: url(http://soccer1x2.net/wp-content/uploads/2012/03/leo-messi1.png); 
    background-size: cover; 
} 







.main-menu-container .sidebar-wt label img { 
    transition: all 0.3s linear; 
} 

input[name="ert"]:checked + .main-menu-container .sidebar-wt label img { 
    transform: rotateZ(180deg); 
    transition: all 0.3s linear; 
} 

Answer 1

Это выглядит как высота .logo-контейнера меняется, когда вы уменьшаете высоту окна.

Если вы min-height: 6em; для .logo-area, высота не уменьшится.