HTML/CSS Div positioning, fit child Div on parent Div

Question

Any help will be highly appreciated!

I need my "Yellow" colored div to resize its height to fit on its parent div. I just want to prevent "Green" div to overflow or to have scroll. I want the yellow div to automatically resize its height to fit inside the "Green" div, but the buttons on the top of yellow div should remain on their position.

I want to anchor the bottom of yellow div on the bottom of "Green" div, regardless of height of "Green" div. The bottom of yellow div should stick on the bottom of "Green" div.

Here is my jsfiddle: https://jsfiddle.net/koykoys/bk4hg5my/

 body { margin: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .parent_container { border: 5px solid red; height: 100vh; display: flex; flex-direction: column; } .blue_box { height: 150px; border: 5px solid blue; } .green_table { flex: 1; overflow-y: auto; border: 5px solid green; } .subDiv{ border: 5px solid yellow; overflow-y:auto; max-height:300px } .btn_actions { padding: 10px; } 

 <div class="parent_container"> <div class="btn_actions"> <button class="btn">Expand Div</button> </div> <div class="blue_box"> </div> <div class="btn_actions"> <button class="btn">Download Data</button> <button class="btn">Sort Data</button> </div> <div class="green_table"> <button >Button1</button><br> <button >Button2</button> <button >Button3</button> <div class="subDiv"> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> </div> </div> </div> 

Answer 1

My understanding, which your information using to generate the following answer. if i am wrongly understanding means can you intimate me

Choice 1: In css calc method using to set dynamic height " Class : subDiv"

 body { margin: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .parent_container { border: 5px solid red; height: 100vh; display: flex; flex-direction: column; } .blue_box { height: 150px; border: 5px solid blue; } .green_table { flex: 1; overflow-y: auto; border: 5px solid green; } .subDiv{ border: 5px solid yellow; overflow-y:auto; height:calc(100% - 44px); } .btn_actions { padding: 10px; } 

 <div class="parent_container"> <div class="btn_actions"> <button class="btn">Expand Div</button> </div> <div class="blue_box"> </div> <div class="btn_actions"> <button class="btn">Download Data</button> <button class="btn">Sort Data</button> </div> <div class="green_table"> <button >Button1</button><br> <button >Button2</button> <button c>Button3</button> <div class="subDiv"> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> Download Data <br> </div> </div> </div> 

Choice 2: add the table to achieve the same concept.

 .clearfix:after { content: " "; display: block; height: 0; clear: both; } .clearfix { background-color: lightblue; } body { margin: 0; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .parent_container { border: 5px solid red; height: 100vh; display: flex; flex-direction: column; } .blue_box { height: 150px; border: 5px solid blue; } .green_table { flex: 1; overflow-y: auto; border: 5px solid green; } .subDiv { border: 5px solid yellow; position: relative; overflow-y: auto; max-height: 300px } .btn_actions { padding: 10px; } 

 <div class="parent_container"> <div class="btn_actions"> <button class="btn">Expand Div</button> </div> <div class="blue_box"> </div> <div class="btn_actions"> <button class="btn">Download Data</button> <button class="btn">Sort Data</button> </div> <div class="subDiv"> <table> <tr> <td> <button>Button1</button> <br> <button>Button2</button> <button c>Button3</button> </td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> <tr> <td>Download Data</td> </tr> </table> </div> </div>