Как добавить пролистывание?

.content { 
    background-color: #aaeeff; 
    width: 100%;     
    transition: width 0.5s; 
    -o-transition: width 0.5s; 
    -moz-transition: width 0.5s; 
    -webkit-transition: width 0.5s; 
} 
.chat-wrapper, .chat-wrapper label { 
    display: table-cell; 
    width: 294px; 
} 
.chat-wrapper { 
    background-color: #5577aa; 
    bottom: 0; 
    color: #ffffff; 
    display: table; 
    font-size: 16px; 
    max-width: 100%; 
    padding: 0 3px 3px; 
    position: fixed; 
    right: 0; 
} 
.chat-wrapper label { 
    display: block; 
    padding: 10px 0; 
    position: relative; 
    text-indent: 10px; 
} 
#show_chat { 
    display: none; 
    width: 0; 
} 
#show_chat ~ .chat-wrapper label::after, #show_chat:checked ~ .chat-wrapper label::after { 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    content:""; 
    display: block; 
    height: 0; 
    position: absolute; 
    top: 15px; 
    right: 10px; 
    width: 0;     
} 
#show_chat ~ .chat-wrapper label::after { 
    border-bottom: 10px solid #ffffff; 
} 
#show_chat:checked ~ .chat-wrapper label::after { 
    border-top: 10px solid #ffffff; 
    border-bottom: 0; 
} 
#show_chat:checked ~ .content {     
    width: calc(100% - 200px); 
    transition: width 0.5s; 
    -o-transition: width 0.5s; 
    -moz-transition: width 0.5s; 
    -webkit-transition: width 0.5s; 
} 
.chat-content { 
    background: #fefaee; 
    color: #000000; 
    max-height: 150px; 
    overflow-y: scroll; 
    padding: 0 5px; 
} 
#show_chat, .chat-content {     
    font-size: 12px; 
    height: 0; 
    transition: height 0.5s; 
    -o-transition: height 0.5s; 
    -moz-transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
} 
#show_chat:checked ~ .chat-wrapper .chat-content { 
    height: 150px; 
    transition: height 0.5s; 
    -o-transition: height 0.5s; 
    -moz-transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
} 
 
 
.hide { 
    display: none;  
} 
.hide + label ~ div{ 
    display: none; 
} 
 
.hide + label { 
    border-bottom: 1px dotted green; 
    padding: 2px; 
    color: black; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 16px; 
} 
 
.hide:checked + label { 
    color: red; 
    border-bottom: 0; 
} 
 
.hide:checked + label + div { 
    display: block;  
    background: #efefef; 
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f; 
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; 
    box-shadow: inset 3px 3px 10px #7d8e8f; 
    padding: 15px;  
}

<input id="show_chat" type="checkbox" />   
    <div class="chat-wrapper">         
        <label for="show_chat">Ответы на вопросы!</label> 
        <div class="chat-content"> 
        <br/> 
            <div class="demo"> 
    <input type="checkbox" id="hd-1" class="hide"> 
    <label for="hd-1" class="sender">В какие дни мы работаем?</label> 
    <div> 
        HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.. 
    </div> 
    <br/> 
    <br/> 
    <input type="checkbox" id="hd-2" class="hide"> 
    <label for="hd-2">Нажмите здесь, чтобы увидеть скрытый текст №2</label> 
    <div> 
    CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL. 
    </div> 
    <br/> 
    <br/> 
    <input type="checkbox" id="hd-3" class="hide"> 
    <label for="hd-3">Нажмите здесь, чтобы увидеть скрытый текст №3</label> 
    <div> 
    JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам... 
    </div> 
    <br/> 
    <br/> 
    <input type="checkbox" id="hd-4" class="hide"> 
    <label for="hd-4">Нажмите здесь, чтобы увидеть скрытый текст №4</label> 
    <div> 
    jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. 
    </div> 
</div> 
        </div> 
    </div>