Modal with scrollable area issues


I am trying to implement a modal with one static area which has a caption and resizable text box and a scrollable list of items underneath as a part of the same modal window. The template code is very simple, but the “scrollable list view” area is not resizing properly.
What could be the issue ? I have to make ion-content as a scrollable list view (or probably have a slide-box area ?) and keep a header and text info. I believe it should not be a sub-header on the modal, but than how exactly should i implement this modal window with ionic ?

Thank you !


<header class="bar bar-subheader bar-stable">
    <div class="item">
        <div class="row">                                                 
            <div class="col col-10">                 
                <p class="task-timesheet"></p>
            <div class="col col-90" >                                                         
                <h3 style="white-space: normal;">Please provide reject reason for the following items</h3>

        <div class="padding">
            <label class="item item-input">
                <textarea id="Textarea1" ng-model="model.rejectReason" rows="4" placeholder="Please provide reject reason" required></textarea>            

<ion-content has-header="true" has-subheader="true"  has-footer="true" scroll="true" >
        <ion-item ng-repeat="task in taskRejectTimesheet.taskList()">            
            {{ task.SummaryLine1 }}                         
<ion-footer-bar id="footer" type="bar-stable" align-title="center">        
    <div class="button-bar">
        <button class="button button-clear" ng-click="rejectClose()">Cancel</button>
        <button class="button button-clear" ng-click="rejectTask(model.rejectReason)" ng-disabled="!(model.rejectReason && model.rejectReason.length>0)">Ok</button>


If the textarea is resizing, the scroll area needs to be notified of the change in content.