Some CSS disaster.

HTML

<body>
  <div id="root"> <!-- Imagine the root id as Electron App Window. -->
    <div id="app">
      <div id="container">
        <div id="top">HEADER</div>
        <div id="main">
          <div id="mainContainer">
            <div class="mainWindow">
              <div class="winHeader">WINDOW 1 HEADER</div>
              <div id="a" class="list" onclick="generate(a)">CLick Here for the list</div>
            </div>
            <div class="mainWindow">
              <div class="winHeader">WINDOW 2 HEADER</div>
              <div id="b" class="list" onclick="generate(b)">CLick Here for the list</div>
            </div>
          </div>
        </div>
        <div id="bottom">FOOTER</div>
      </div>
    </div>
  </div>
</body>

CSS

div {
  border: 1px solid black;
}

#root {
  width: 500px;
  height: 300px;
  position: relative;
}

#app {
  height: 100%;
  width: 100%;
}

#container  {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#top {
  height: 50px;
}

#main {
  flex: 1;
}

#mainContainer {
  display: flex;
  height: 100%;
  width: 100%;
}

.mainWindow {
  flex: 1;
	position: relative;
}

.list {
  overflow: auto;
}

#bottom {
  height: 50px;
}

JavaScript

max_elements = 20

function generate(e){
	html = ""
	for (i = 0; i < max_elements; i++){
  	html += `<li>Element ${i + 1}</li>`
  }
	e.innerHTML = html
}