Flexbox scrollable

index.html

<div class="container">
  
  <div class="header">
    <h3>Title</h3>
  </div>
  
  <div class="content">
    <div class="scrollable">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p>  
    </div>
  
   <div class="scrollable">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam veritatis quae vel dolor optio nobis vitae, dolore quaerat nulla alias, tenetur perspiciatis porro saepe nostrum cum non quam ipsa recusandae.</p> 
    </div>
    
  </div>
  
  <div class="footer">
      <p>Footer</p>
  </div>
  
</div>

style.css

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

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

.header, .footer {
  flex: none;
  color: white;
}

.header {
  background: blue;
}

.footer {
  background: lime;
}

.content {
  background: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.scrollable {
  flex: 1 1 0;
  overflow: auto;
}