TypeScript

HTML

<div id="app">
<div class="left">
  <div class="first">
    <div class="header">Dynamic Items</div>
    <div class="scrollable">
      <div id="items">
        <div class="item">Predefined</div>
      </div>      
    </div>
  </div>
  <div class="second">
    <div class="header">Fixed Items</div>
    <div class="items">
      <div class="item">Fixed Item 1</div>
      <div class="item">Fixed Item 2</div>
      <div class="item">Fixed Item 3</div>
    </div>
  </div>
</div>
<div class="right">
  <button id="btn">Add 5 Items</button>
</div>
</div>

CSS

/** Containers **/
.left {
  display: flex;
  flex-direction: column;
}

.first {
  /* overflow: auto; */
  display: flex;
  flex-direction: column;
  min-height: 0; /* for Edge and FF; https://stackoverflow.com/q/36247140/3597276 */
}

.scrollable {
  overflow: auto;
  
}


/** Just for setup **/
html, body {
  padding: 0;
  margin: 0;
  height:100%;
}

#app {
  display: flex;  
  height: 100%;
}

.left {
  flex: 0 0 10em;
  padding: 0 1em;
}

.left > * {
  margin: 1em 0;
}

.header {
  font-weight: 800;
  text-align: center;
  border-bottom: 1px solid black;
}

.first {
  background-color: #a4daa6;
}

.second {
  background-color: red;
}

.right {
  flex: 1;
  background-color: gray;
}

TypeScript

const el = document.querySelector("#btn");
el.addEventListener('click', () => {
  for (let i=0; i<5; i++) {
  	const item = document.createElement('div');
	  item.innerHTML = 'D-Item ' + i;
  	document.querySelector("#items").appendChild(item);
  }  
}); 
 
/* document.querySelector("#app").innerHTML = greeter(user); */