Grid height not getting adjusted

I have a filter row and ui-grid. when the filter is toggled (visible), the ui-grid's height is not getting resized and so last few rows and vertical scroll bar is getting hidden below.

I tried to set the height as auto instead of setting in %, but then it takes only half of the available space always. Also, I have tried the autoResize feature of ui-grid.

<div>
 <div class="row" id="toggleFilter"></div> 
 <div class="grid"></div>
</div>