Css - вертикальная стопка контейнеров со свитками

Question

Мне нужна вертикальная стопка блоков (может быть со свитками), содержащаяся в контейнере с фиксированным размером (без свитков). Количество видимых блоков управляется динамически из js-кода. Некоторые блоки можно установить скрытыми или видимыми. Видимые блоки должны занимать все свободное пространство после того, как какой-то блок был скрыт.

Я использовал элемент таблицы для этого. Но ячейки таблицы расширяются вертикально, а целая таблица расширяется вертикально за пределами нижнего размера.

Как я могу установить высоту стола? Или какой-нибудь другой дизайн может быть использован?

Вот HTML и CSS:

table{ 
 
    table-layout:fixed; 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 
div{ 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-y:scroll; 
 
    white-space:normal; 
 
}

<table border="1"> 
 
    <tr><td><div> 
 
     dsdgfsjafkgasfd sajhsadfhsafdsfsafs afsafsafsafsa fsafsafsafsafsaf 
 
     asfsafsafsafsafsafs afsaffsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa 
 
    </div></td></tr> 
 
    <tr><td><div> 
 
     dsdgfsja fkgascfdsajhsadfhsafdsfsaf safsafsafsafs afsafsafsafsafsaf 
 
     asfsafsafsaf safsafsafs affsfsasafsafsfa sfasfsafsafsaffsafsaffsafsa 
 
    </div> 
 
</table>

Answer 1

Вот решение с фиксированной высотой контейнера и скроллинга. Я добавил границы, чтобы показать как внутренние блоки, так и контейнер: вы можете удалить их, если хотите.

#container { 
    border:1px solid black; 
    display:inline-block; 
    overflow-y:scroll; 
    width: 200px; 
    height: 300px; 
} 

#content { 
    border:1px solid green; 
    height: 100%; 
    overflow-y:scroll; 
} 

Fiddle