javascript - How to resize the top div according to the bottom div -

i have top div chart , bottom div contains 4 rows @ end of each row have close icon on click of close icon particular row disappears, remaining rows should go down top div should occupy remaining space how in css or javascript. using concept of ng-repeat angular js rows getting repeated.

if number of rows below may change, i'd suggest using flexboxes. on parent div (which wraps both chart , rows):

display: flex; flex-direction: column; 

and on chart-wrapper:

flex: 1 0 0%;  

this make chart-wrapper div take remaining space of parent div. if you'd support older browser, don't forget vendor prefixes:

display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; 

and:

-webkit-box-flex: 1 0 0%; -moz-box-flex:  1 0 0%; -webkit-flex:  1 0 0%; -ms-flex:  1  0 0%; 

if haven't already, take time read more flexboxes. people claim best things added css on years, , have agree - solve lot of layout problems.