JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">

  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>
    <div class="half-containers">

      <img src='https://i.imgur.com/tqQvuFr.jpg' />

    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

CSS

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

img {
  object-fit: contain;
}