Showing last li by css sticky

soluton: https://stackoverflow.com/questions/45719909/scroll-to-bottom-of-an-overflowing-div-in-react

by ycw7788

HTML

case 1: orphan 
<ul>
  <li>last</li>
</ul>

case 2: no overflow
<ul>
  <li>1</li>
  <li>2</li>
  <li>last</li>
</ul>

case 3: overflow
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>last</li>
</ul>

CSS

ul {
  max-height:150px;
  overflow-y:auto;
  margin:20px;
}
li {
  height:50px;
}
li:last-child {
  position:sticky;
  bottom:0;
}

/* styling */
ul {
  box-shadow:0 0 10px rgba(0,0,0,0.3);
  list-style-type:none;
}
li { background:#fff }
li:nth-child(2n) { background:#eee; }