CSS: Ручка переполнения, используя дочерний элемент

Question

У меня есть HTML код этой архитектуры:

<div id="container"> 
    ... some divs ... 
    <div id="results"> 
     ... some content ... 
    </div> 
</div> 

содержание написано в результатов изменения и иногда результаты 'высота идет мимо контейнера внизу. Я хочу, чтобы результаты ручка переполнения полосами прокрутки не контейнер, но я не могу это исправить. что мне делать? Я открыт для решений javascript, если они гибки в изменении размера окна.

примечание: результаты div не имеет фиксированной процентной высоты в CSS, и он не может иметь один.

Answer 1

Если вы можете позволить себе использовать Flexbox вы могли бы решить эту проблему следующим образом (опущенные префиксы для краткости):

#container { 
    height: 150px; 
    display: flex; 
} 

#results { 
    overflow-y: scroll; 
} 

https://jsfiddle.net/4n3tmbm3/5/

Answer 2

Вы можете идти по этому пути:

#container {overflow: hidden;} 
#results { 
    max-height: 400px; 
    overflow: scroll; 
} 

Это будет делать то, что вы хотите достичь, дайте мне знать, если любая вещь еще нужно?

Answer 3

Использование overflow-y: auto на ребенка & overflow-y: hidden на родителей и дать max-height, если вы не можете дать фиксированную высоту.

#container { 
    overflow-y: hidden; 
} 

#results { 
    max-height: 200px; 
    overflow-y: auto; 
}