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: 3px 0;
  transform: scaleY(-1);
}

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