Как выровнять список элементов вниз?

Я хотел бы выровнять список элементов внутри контейнера снизу. По умолчанию он прикрепляется к верхней части контейнера.

Обратите внимание: этот список должен сохранять свою способность прокрутки . Поэтому я не могу использовать flex. Flex позволяет изменять размеры элементов и избегать прокрутки.

Я не могу придумать простой способ сделать это.

JSFiddle

#list { height: 200px; } .item { height: 30px; line-height: 30px; background-color: lightgray; margin: 3px 0; } 
 
Item0
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9

введите описание изображения здесь

Существует хак, использующий масштабирование transform в направлении y – см. Демо ниже:

 #list { height: 200px; border:1px solid green; overflow-y: auto; transform: scaleY(-1); } .item { height: 30px; line-height: 30px; background-color: lightgray; margin: 3px 0; transform: scaleY(-1); } 
 
Item0
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
 #list { position: absolute; bottom: 0; } 

не забудьте добавить position: relative; к вышеуказанному элементу

https://jsfiddle.net/ege89t3h/