Hover Text (FlexBox)

HTML

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="container">

<div class="bar">
Small
</div>

<div class="content">

<div>Static content</div>
<div class="scroll"></div>
<div>Static content</div>

</div>

<div class="footer">
Small
</div>


</div>

CSS

body, html {
  margin: 0;
  padding: 0;
}

.container {
  box-sizin: border-box;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

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

.scroll {
  flex: 1 1 auto;
  overflow: scroll;
}

JavaScript

for(var i=0; i<100; i++)
	$(".scroll").append("Dynamic content<br>");