<div class='wrapper'>
  <header class='header'>Header</header>
  <main class='main'>
    <div class='block'>Content</div>
  </main>
  <footer class='footer'>Footer</footer>
</div>

html,
body {
  height: 100%;
  text-align: center;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header,
.footer {
  height: 100px;
  background-color: pink;
}

.main {
  background-color: silver;
  flex: 1;
  /* .block alignment */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.block {
  width: 200px;
  height: 200px;
  background-color: gray;
}

/**
  "Content" block is some block with an unknown size.
  Just try to change the height of the page.
  "Content" block will go out the "main" block.
 
  How can it be fixed?
 
  Expected behavior: scroll exists, the full "content" block is in the "main" block.
*/