Прокрутка div в другом div

Question

Я хочу добавить прокрутку во вторую часть, это «chat-messages» div в div «chat-bar». Я хочу, чтобы эти «чат-сообщения» делали прокручиваемыми, оставляя остальную часть сайта без каких-либо кривых. В этот момент мне нужно прокрутить весь сайт, чтобы увидеть div «вход-строка». Это работает, когда я установил overflow: auto в «чат-бар», но тогда весь input-row также включен в прокрутку. Пожалуйста, дайте мне лучший css/html вариант, как решить эту проблему, или дать мне простую библиотеку javascript.

jsfiddle ссылка:

jsfiddle.net/o9vmfgpx/3 

редактировать: Я сделал это работает, но в какой-то Hacky способом.

.chat-messages { 
    overflow-y: scroll; 
    -ms-overflow-style: none; 
} 
.chat-messages::-webkit-scrollbar { 
    display: none; 
} 

@-moz-document url-prefix() { 
    .chat-messages { 
     right: -5%; 
     padding-right: 3%; 
    } 
} 

Работы по последней версии IE, EDGE, Chrome, Firefox и Opera (как 10.14.2016)

Answer 1

Это должно работать.

body { 
     overflow:hidden; 
} 
.chat-messages { 
     overflow:scroll !important; 
} 

Answer 2

Попробуйте это.

.input-row { 
    position: fixed; 
    bottom: 10px; 
    left: 10px; 
} 

Answer 3

Попробуйте добавить ниже css?

.chat-messages { 
    height:200px; 
    overflow:scroll; 
}