Two columns, fixed header/footer, not working

Two columns, fixed header/footer, not working

by asterisk03

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Page Title</title>
  </head>

  <body>
    <header>Header</header>
    <div class="wrapper">
      <div class="left-column">
        <table>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
              <th>Column 5</th>
            </tr>
          </thead>
          <tbody>
            <!-- I intend to repeat this row till I obtain a vertical scrollbar -->
            <tr>
              <td>Row 1, Column 1</td>
              <td>Row 1, Column 2</td>
              <td>Row 1, Column 3</td>
              <td>Row 1, Column 4</td>
              <td>Row 1, Column 5</td>
            </tr>

            <tr>
              <td>Row 2, Column 1</td>
              <td>Row 2, Column 2</td>
              <td>Row 2, Column 3</td>
              <td>Row 2, Column 4</td>
              <td>Row 2, Column 5</td>
            </tr>

            <tr>
              <td>Row 3, Column 1</td>
              <td>Row 3, Column 2</td>
              <td>Row 3, Column 3</td>
              <td>Row 3, Column 4</td>
              <td>Row 3, Column 5</td>
            </tr>

            <tr>
              <td>Row 4, Column 1</td>
              <td>Row 4, Column 2</td>
              <td>Row 4, Column 3</td>
              <td>Row 4, Column 4</td>
              <td>Row 4, Column 5</td>
            </tr>

            <tr>
              <td>Row 5, Column 1</td>
              <td>Row 5, Column 2</td>
              <td>Row 5, Column 3</td>
              <td>Row 5, Column 4</td>
              <td>Row 5, Column 5</td>
            </tr>

            <tr>
              <td>Row 6, Column 1</td>
              <td>Row 6, Column 2</td>
              <td>Row 6, Column 3</td>
              <td>Row 6, Column 4</td>
              <td>Row 6, Column 5</td>
            </tr>

            <tr>
              <td>Row 7, Column 1</td>
              <td>Row 7,...

CSS

body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    header {
      height: 100px;
      background-color: lightgray;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }

    .wrapper {
      display: flex;
      height: calc(100% - 175px);
      margin-top: 100px;
      margin-bottom: 75px;
      overflow-x: auto;
      overflow-y: hidden;
    }

    .left-column {
      width: 50%;
      height: 100%;
      flex: 1;
      position: relative;
    }

    .left-column table,
    th,
    td {
      width: 100%;
      border: 1px solid;
    }

    .left-column thead th {
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 1;
    }

    .right-column {
      width: 50%;
      height: 100%;
      overflow-y: scroll;
      flex: 1;
    }

    .left-column,
    .right-column {
      overflow-x: hidden;
    }

    footer {
      height: 75px;
      background-color: lightgray;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }