JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-9">
<div id="container">
<div id="fixeddiv-top">FIXED DIV (TOP)</div>
<div id="content-container">
<div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
</div>
<div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>
</div>
</div>
</div>
<div >
</div>
</div>
</div>
<br/><br/>
Without bootstrap Grid scroll works!!
<div id="container">
<div id="fixeddiv-top">FIXED DIV (TOP)</div>
<div id="content-container">
<div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
</div>
<div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>
CSS
html {
height:100%;
}
body {
height:100%;
margin:0;
padding:0;
}
#container {
width:600px;
height:100%;
text-align:center;
display:block;
position:relative;
}
#fixeddiv-top {
background:#AAA;
text-align:center;
width:100%;
height:20px;
}
#content-container {
height:100%;
}
#content {
text-align:center;
height:100%;
background:#F00;
margin:0 auto;
overflow:auto;
}
#fixeddiv-bottom {
background:trasparente;
text-align:center;
width:100%;
height:20px;
}