scrollable element

HTML

<div>some content <br> just scroll down</div>
<div class="container">
  <div class="first">This list should be scrolled -></div>
  <div class="scrollable">
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
  </div>
</div>
<footer>this is footer</footer>

CSS

body {
  background: white;
  padding: 0px;
  font-family: Helvetica;
  height: 1000px;
  display: flex;
  flex-direction: column;
}

.container {
  margin-top: auto;
  background: gray;
  width: 100%;
  height: 100px;
  
  display: flex;
  flex-direction: row;
}

.first {
  width:50%;
  height: inherit;
}
.scrollable {
  width:50%;
  height: inherit;
  overflow: scroll;
}

footer {
 height: 50px;
 color:white;
 background: #000;
}