Troubleshooting for CSS layout issue [duplicate]

I am facing some trouble in implementing the layout of a page that I am working on. I have attached a screenshot of the desired layout. The main element is the box in the bottom right showing tab-content and header; I want that box to take 50% of the visible right half.
This is the code snippet showing what I am attempting.

html,
body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  background: lightcoral;
  height: 50px;
}

.main {
  background: blue;
  flex: 1;
}

.page {
  height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
}

.page-header {
  height: 50px;
  background: yellow;
}

.page-content {
  background: lightgoldenrodyellow;
  flex: 1;
  display: flex;
}

.element1 {
  background: lightgreen;
  width: 50%;
  height: 100%
  max-height: 100%;
  overflow-y: auto;
}

.element-1-content {
  height: 1000px;
}

.element2 {
  width: 50%;
  background: lightblue;
  display: flex;
  height: 50%;
  flex-direction: column;
}

.tab {
  background: lightslategrey;
  height: 20px;
}

.tab-content {
  flex: 1;
  background: lightpink;
}
<header class="header">
  <p>
    some header
  </p>
</header>
<main class="main">
  <div class="page">
    <header class="page-header">
      <p>
        page header
      </p>
    </header>
    <main class="page-content">
      <div class="element1">
        <div class="element-1-content">
          Element 1 content
        </div>
      </div>
      <div class="element2">
        <div class="tab">
          tab header
        </div>
        <div class="tab-content">
          tab content
        </div>

      </div>
    </main>

  </div>
</main>

Desired layout