Переполнение скрыто, а вложенная прокрутка переполнения не работает ⇐ CSS

[Гость]

У меня проблема с тем, что элемент div не прикрепляется к родительскому элементу, хотя у него есть переполнение: скрыто.
Я просмотрел переполнение: скрыто code> вопросы здесь по stackoverflow, но у большинства из них либо проблемы с позицией, либо кажется, что мой код должен работать.
Вот MWE, вы можете найти jsfiddle здесь:



meh




CSS:
#parent {
height: 500px;
overflow: hidden;
}

#scroller {
overflow: scroll;
}

#child {
height: 10000px;
}

Чего я ожидаю
#parent имеет переполнение: скрыто, поэтому #scroller обрезается до высоты родительского элемента. Поскольку его #child выше, чем результирующее переполнение высоты: прокрутка приводит к появлению полосы прокрутки.
Что происходит
#scroller просто использует высоту #child и игнорирует оба свойства переполнения.
А как насчет простых обходных путей?
< ul>
[*]В моей реальной проблеме в #parent есть несколько , поэтому я не могу задать #scroller высоту.
HTML генерируется автоматически, поэтому я не могу просто удалить #scroller.

Спасибо за помощь ,
Стефан
ОТВЕТ
На самом деле в комментариях есть ответ только для CSS с display: flex. См.:
https://jsfiddle.net/huocukw7/6/
#parent {
height: 500px;
overflow: hidden;
display: flex;
flex-direction:column;
}

#scroller {
overflow: auto;
flex-grow:1;
}

#child {
height: 10000px;
}


Источник: https://stackoverflow.com/questions/435 ... ot-working