CSS правая боковая панель 100% высота не работает

Question

У меня есть один вопрос о 100% высоте. Я создал это demo от codepen.io

В этой демонстрации вы можете видеть, что правая сторона имеет боковую панель. У меня проблема с красным div там. 100% высота не работает правильно, проблема с переполнением. Если вы scoll вниз из красного div, это прокрутка, но нет никакого текста или чего-то еще. Любой может сказать мне, чего я не вижу там, чтобы использовать без переполнения.

CSS

html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.sidebarwrap { 

    -webkit-background-clip: padding-box; 
    background-color: #dfdfdf; 
    border-left: 1px solid #CCCCCC; 
    box-shadow: inset 1px 0 1px -1px #CCCCCC; 
    display: block; 
    height: 100%; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 255px; 
    z-index: 300; 
    padding-top: 57px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
} 
.col { 
    float: left; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    overflow: hidden; 
    padding-top: 57px !important; 
    min-height: 185px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 5px; 
    overflow-y: scroll; 
    width:100%; 
} 
.sidebarin1 { 
    float: left; 
    width: 255px; 
    background-color: #E6E3E3; 
    height: auto; 
    width: 100%; 
    border-top: 1px solid #CCCCCC; 
    border-bottom: 1px solid #CCCCCC; 
    padding: 7px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
} 
.sidebarin2 { 
    float: left; 
    width: 255px; 
    background-color: #E6E3E3; 
    height: auto; 
    max-height: 250px; 
    width: 100%; 
    margin-top: 2px; 
    border-top: 1px solid #CCCCCC; 
    border-bottom: 1px solid #CCCCCC; 
    padding: 7px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
} 
.sidebarin3 { 
     width: 100%; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    background-color: #E6E3E3; 
    border-top: 1px solid #CCCCCC; 
    border-bottom: 1px solid #CCCCCC; 
    padding: 7px; 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    float: left; 
    left: 0; 
    overflow: auto; 
    height: 100%; 
    min-height: 100%; 
    height: auto !important; 
    position: relative; 
    margin: 0px; 
    background-color:red; 
} 
.sidebarin3in { 
    position: absolute; 
    height: 100%; 
    bottom: 0px; 
    top: 0px; 
    padding: 5px; 
    box-sizing: border-box; 
    overflow: hidden; 
} 

HTML

<div class="sidebarwrap"> 
    <div class="col"> 
    <div class="sidebarin1">fdsafadsfasd fasd fa</div> 
    <div class="sidebarin2">fdsafasdfasdf</div> 
    <div class="sidebarin3"> 
    <div class="sidebarin3in"></div> 
    </div> 
    </div> 
    </div> 

Answer 1

Вы можете дать боковую панель высотой:

.sidebarin3 {  
    height: calc(100% - 66px); 
} 

где 66px является высота над красным меню элементов.

Чтобы сделать его чище и не «угадывание» эта высота я бы рекомендовал, чтобы дать значения фиксированной высоты этих элементов (в РХ)

codepen