переполнение: скрыто и% высоты

Question

Я создаю страницу, на которой не требуется фиксированная высота px, а также использую overflow: hidden.

Мой HTML имеет форму;

<div class="scrollable fl">
...Some content
</div>

CSS определяется как;

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

Также, чтобы добавить, я дал переполнение: скрытый (с плавающей точкой: слева и для некоторых родителей) всем div / родительским / родительским элементам прокрутки ..

Теперь проблема в том, что прокручиваемый div не расширяется в соответствии с его содержимым, если я задаю высоту как 100% (это относится к фиксированной высоте в пикселях ... Но у меня нет этой опции, так как я разрабатываю полностью плавный макет )

Я попробовал 2 вещи с моей стороны, которые не работали; 1. Поддержание цепочки высоты в живых (т. Е. Предоставление 100% высоты всем элементам div родителя / предка прокручиваемого объекта). 2. Попытка с высотой: авто для прокрутки

Как мне исправить эту проблему?

Answer 1

Элемент div установлен на 100% высоты, требуемой его содержимым, а не тем, что вы хотите.

try:

.scrollable {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    position: relative;
    top:0px;
    bottom:0px;
    width: 100%;
}

Возможно, вам придется сделать это для других элементов вверхцепь также.