半屏幕固定部分,半滚动至内容。然后反转截面

#container-main {
  background: tan;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: flex-start;
}

#container-gray {
  background: gray;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 50%;
  justify-content: center;
}

#container-black {
  background: black;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  justify-content: flex-end;
}

#hello {
  background: blue;
  flex: .5;
  align-self: center;
}

#container-nav {
  background: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#how {
  background: orange;
}

#are {
  background: purple;
}

#you {
  background: pink;
}

#container-content {
  background-color: beige;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  justify-content: flex-start;
}

.headings {
  width: 49%;
  align-self: center;
  flex: 1;
}

.articles {
  width: 85%;
  align-self: center;
}

<div id=container-main>
  <div id="container-gray">
    <div id="container-black">
      <p id="hello">Hello</p>
      <div id="container-nav">
        <p id="how">How</p>
        <p id="are">are</p>
        <p id="you">you</p>
      </div>
    </div>
  </div>
  <div id="container-content">
    <h1 class="headings">First heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
    <h1 class="headings">Second heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
    <h1 class="headings">Third heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
    <h1 class="headings">Fourth heading</h1>
    <article class="articles">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
      nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
    </article>
  </div>
</div>