Stack elements at the bottom (instead of the top) of the container

Question

I have a <ul> that has a fixed height and I need the <li>'s inside it to stack at the bottom (instead of the top).

I tried vertical-align: bottom on the <ul> but that doesn't change anything.

The content li have a chance of overflowing, and if they do I need the scrollbar to work.

ul {
  border: 1px solid red;
  height: 250px;
  vertical-align: bottom;
}
li {}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

JsFiddle: https://jsfiddle.net/hbcnvk4s/

Thanks !

Answer 1

Try CSS flexbox:

ul {
  display: flex;           /* establish flex container */
  flex-direction: column;  /* align children vertically */
  border: 1px solid red;
  height: 250px;
}

li:first-child {
  margin-top: auto;        /* shift top li, and all li's beneath, to the bottom */  
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Flex auto margins are used to align the lis to the bottom.

Although justify-content: flex-end would also align the items to the bottom, the scroll mechanism doesn't work when the items overflow the container (demo | bug report).

As an aside, scrolling would work if justify-content were flex-start or center (demo).

Answer 2

You can do this with position: absolute; bottom: 0.

https://jsfiddle.net/hbcnvk4s/1/

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

div {
  border: 1px solid red;
  height: 250px;
  position: relative;
}

ul {
  bottom: 0;
  position: absolute
}

Not so easy with vertical-align