div with 3 rows and scrollable content at the middle - html

Question

I have to do 3 rows div with scrollable content at the middle row.
Container is absolute position and can't be larger than 100% of the document height.
Container height depends of rows height, and middle row has dynamic height from x to x px.
Can't use max-height: x vh, bacuse of older browser incompatibility.
/* main container can't be larger than 100% of the screen */
.container {
position: absolute;
left: 0;
top: 10px;
width: 250px;
background: green;
max-height: 100%;
}
/* this needs to be scrollable if dynamic content is to large */
.middle-row {
max-height: 90%;
overflow-y: scroll;
background: blue;
}
/* this always needs to be visible */
.last-row {
}
.dummy-large-div {
height: 5000px;
}
<div class="container">
<div class="first-row">some thing</div>
<div class="middle-row">
<div class="dummy-large-div"></div>
</div>
<div class="last-row">
<button>submit</button>
</div>
</div>
Do you have any ideas?

Answer 1

Since you mentioned that you need to support Android 4x - that makes flexbox a viable option (caniuse)
The code also becomes very simple.
Just add the following to the container class
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
and the following to the middle row:
.middle-row {
-webkit-flex: 1;
flex:1;
}
Also, be sure to add -webkit- prefixes to support Android 4.1-4.3
FIDDLE 1 (little content)
FIDDLE 2 (lots of content)
.container {
position: absolute;
display: flex;
flex-direction: column;
left: 0;
top: 0;
width: 250px;
background: green;
max-height: 100%;
}
/* this needs to be scrollable if dynamic content is to large */
.middle-row {
overflow-y: scroll;
background: blue;
flex: 1;
}
<div class="container">
<div class="first-row">some thing</div>
<div class="middle-row">
<div class="dummy-large-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
<div class="last-row">
<button>submit</button>
</div>
</div>

Answer 2

You need to specify a height to the .container class. It is auto by default and the content is a relative height.