How To Align A List Of Elements To Bottom?

I'd like to align a list of elements inside of a container to bottom. By default it sticks to the top of the container. Note that this list needs to keep its scroll ability. So I c

Solution 1:

There is a hack using transform scaling in the y-direction - see demo below:

#list {
  height: 200px;
  border:1px solid green;
  overflow-y: auto;
  transform: scaleY(-1);
}
.item {
  height: 30px;
  line-height: 30px;
  background-color: lightgray;
  margin: 3px0;
  transform: scaleY(-1);
}

<divid="list"><divclass="item">Item0</div><divclass="item">Item1</div><divclass="item">Item2</div><divclass="item">Item3</div><divclass="item">Item4</div><divclass="item">Item5</div><divclass="item">Item6</div><divclass="item">Item7</div><divclass="item">Item8</div><divclass="item">Item9</div></div>