Почему переполнение: прокрутка не работает в этом интерфейсе?

Question

Следуя советам по таким статьям, как этот из CSS-Tricks (https://css-tricks.com/almanac/properties/o/overflow/), я построил двухпанельный пользовательский интерфейс, используя Bootstrap для приложения с угловым приводом. Эти две панели предназначены для вертикальной прокрутки независимо друг от друга и со страницы в целом. Это поведение работает в соответствии с последней версией проекта, здесь: https://monstermancer.herokuapp.com/ (возможно, потребуется сократить окно браузера, чтобы просмотреть прокрутку панели в действии без входа в систему). В случае, если это актуально, в этой версии приложения используются SystemJS и Angular 2.0.0-rc5.

Недавно, после того, как я внес изменения в Webpack, используя Angular CLI и обновил версию с угловым выражением до версии 2.2, но сохраняя при этом все HTML и LESS то же самое, это поведение прокрутки больше не работает. Смотрите в «действие» здесь: https://monster-mash.herokuapp.com/

У меня есть codepen вверх, что изолирует вид образца из приложения и забот себя только поведение прокрутки здесь: https://codepen.io/Polisurgist/pen/bBOZzm

Соответствующего CSS от этого пера:

body { 
    overflow: hidden; 
} 
.scroll { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    height: 100%; 
    padding-bottom: 50px; 
} 
::-webkit-scrollbar{ 
    display:none; 
} 

Мое предположение, что как-то я пропустил критический немного CSS, когда я переехал код из старой версии на новую, хотя я не могу поставить то, что может быть недостающий кусок. Я помещаю angularJS и webpack на этот вопрос не потому, что думаю, что любой из этих действительно вызвал проблему, но потому что какая-то проблема, возможно, была представлена ​​в качестве залога для меня, делающего это обновление.

Основной вопрос: В чем причина того, что две панели в этом интерфейсе не прокручиваются по вертикали?

Answer 1

Проблема заключается в том, что размер #content, .row, col-sm8 автоматически регулирует высоту для размещения внутреннего содержимого, поэтому свиток никогда не появляется.

Чтобы решить эту проблему и получить нужное поведение прокрутки, вам необходимо сделать все родительские элементы 100%. Вы можете сделать это, добавив в ваш CSS (добавить другой класс Col в список селекторов, как): необходимому

html, 
body, 
.row, 
.col-sm8, 
#content{ 
    height:100%; 
}