JSFiddle - React, Tailwind, and code Playground

HTML

use mouse wheel over this image
<div id="subG">
    <div id="subUp"> TTTTT </div>
    <!--This to be fixed on top of this parent div-->
    <div id="subGH"> 
        <img src="http://img42.com/lwZZW+">
    </div>
    <div id="subDwn"> BBBB </div> 
        <!--This to be fixed at the bottom of this parent div-->
</div>

CSS

#subG{
	height: 100px;
	overflow: hidden;
	overflow-x: hidden;
	position: relative;
}
#subGH{
	height: 60%;
	position: absolute;
	overflow: auto;
	top: 20px;
    bottom: 0px;
    left: 0px;
    right: -15px;
}
#subUp #subDwn{
	position: relative;
}
#subUp{
    position: absolute;
    top: 0;
}
#subDwn{
    position: fixed;
    bottom: 0;
}