JSFiddle - React, Tailwind, and code Playground

HTML

<body class="flex">
  <header>Header</header>
  <main class="flex">
    Main
    <div class="flex">
      <header>Header in Main</header>
      <main>
        <column>This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.</column>
        <column>This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.</column>
      </main>
    </div>
  </main>
</body>

CSS

* { box-sizing: border-box; margin: 0 }

html, main, .flex, column { height: 100%; overflow: hidden }

.flex {
  display: flex;
  flex-direction: column;
}

header, main {
  border: 1px solid #000;
  height: 20px;
}

main header, main main {
  background: rgba(0,0,0,.3)
}

main {
  height: 100%;
  overflow: hidden;
}

main main {
  max-height: 250px;
  font-size: 0;
}

main div {
  justify-content: center;
  align-self: center;
  max-width: 650px;
}

column {
  display: inline-block;
  font-size: 16px;
  width: 50%;
  overflow-y: scroll;
}