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 !

`vertical-align` controls how two (or more) inline or inline-block elements are aligned to each other (it doesn't effect the content inside of an element) — Chaim, Jul 26 '16 at 01:15

Michael Benjamin · Accepted Answer · 2018-04-15T01:09:42.003

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).

score 1 · Answer 2 · answered Jul 26 '16 at 01:15

1

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

answered Jul 26 '16 at 01:15

Petah

45,477
28
157
213

1

This looks right at first glance, but this moves the whole `ul`at the bottom of it's parent div. Unfortunately I can't do that, I need the `ul`to have a fixed height and `li`'s inside of it scrolled down. – Alexandre Danault Jul 26 '16 at 01:18
1

@AlexandreDanault why do you _need_ the `ul` to be fixed height? – Petah Jul 26 '16 at 01:20
1

@Chaim I need to have the `ul` on a fixed height because I need the scrollbar to work. With a parent `div` it doesn't work : https://jsfiddle.net/5tbLc8j3/ – Alexandre Danault Jul 26 '16 at 01:24

score 0 · Answer 3 · answered Apr 15 '18 at 12:02

you could also use flex-direction: column-reverse.

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

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

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

3 Answers3