Scroll and fix div elements

html,
body {
  margin: 0;
  height: 100%;
  background: lightblue;
}

/* make sidebar flex and 100% height */
#sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;  
  /* demo only */
  width:200px;
}

#div1 {
  flex-grow: 1;  /* make div1 grow to take remaing space after div 2 hs shown it's contents */
  position: relative;
  background: lightgreen;
}

.scroll {
  /* this just fills your div 1 and then scrolls if it overflows */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

#div2 {
  /* demo only as there is no content, I just gave some height for demo purpose */
  min-height:50px;
  background:orange;
}

<div id="sidebar">
  <div id="div1">
    <div class="scroll">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
        <li>1</li>
        <li>2</li>
        <li>N</li>
      </ul>
    </div>
  </div>

  <div id="div2">
    <div>Constant Content</div>
  </div>
</div>