Stacking Divs from Bottom to Top

Question

When appending divs to a div with a fixed height, the child divs will appear from top to bottom, sticking at the top border.

┌─────         


        

Answer 1

We can simply use CSS transform to archive this.

I created a codepen for it. https://codepen.io/king-dev/pen/PoPgXEg

.root {
  transform: scaleY(-1);
}
.root > div {
  transform: scaleY(-1);
}

The idea is to flip the root first horizontally and then flip direct children divs again.

NOTE: the above method also reverses the order of divs. If you simply want to place them to start from bottom you can do the following.

.root {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: auto;
}
.root > div:first-child {
  margin-top: auto;
}