<header class="header">Header</header>
<main class="main">
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
      <p>Content to scroll</p>
</main>

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
	margin:0;
	padding:0
}
body{
	display: flex;
	height: 100vh;
	flex-direction: column;
}
.main {
	flex: 1;
  overflow:auto;
  background:#ccc;
 	padding:10px;
}
header {
	background:green;
	padding:10px;
}