Failed scroll

by yanhaifa

HTML

<div class="ss">

<p class="header">Header</p>

<div class="scroll">
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
<p>sfddsfds</p>
</div>


<p class="footer">Footer</p>

</div>

CSS

html, body {
  height:100%;
  margin:0;
}
.ss, .scroll, .footer {
  box-sizing: border-box;
}

.ss {
  display:flex;
  flex-direction: column;
  max-height: 100%;
  border: 1px solid #ddd;
}

.header {
  flex: 0 0 auto;
}

.scroll{
  flex: 1 1 auto;
  position: relative;
  overflow-y: auto; /* add overflow on y-axis so it add the scroll bar */
}
.footer {
  flex: 0 0 auto;
  margin:0;
  border: 1px solid orange;
  padding:10px;
}