In a ul element of long height, how to have two elements at the bottom

Question

I have a simple element ulthat has a large height, I want the last two elements liat the bottom of the element uland rest on top.

You can see the current implementation here .

The code is as follows:

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}

<div id="demo">
  <ul class="my-ul">
    <li>First Element</li>
    <li>Second Element</li>
    <li>Third Element</li>
    <li>Fourth Element</li>
    <li>Fifth Element</li>
  </ul>
</div>

Run codeHide result

I tried the solutions from here and here , but this does not work .

Answer 1

The solution I see here is flexbox

ul {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: flex-start;
}

ul li:nth-last-child(2) {
  margin-top: auto;
}

<ul>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
</ul>

Run codeHide result

Answer 2

Use the css selector for the last two elements. Check out the sample code below:

<div id="demo">
  <ul class="my-ul">
    <li>First Element</li>
    <li>Second Element</li>
    <li>Third Element</li>
    <li>Fourth Element</li>
    <li>Fifth Element</li>
  </ul>
</div>

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}
li:last-child {
  position: fixed;
  top: 370px;
}
li:nth-child(4) {
  position: fixed;
  top: 350px;
}