javascript - How to make div expand only from bottom down -

i have div in modal below. problem i'm having when click on add row, creates div row , expands both top , bottom. div goes off screen after couple of rows added. please see screenshots. note: query-row element angular directive, that's why don't see template (which includes actual fields , add row button). that's irrelevant in case.

html

<div class="ng-modal ng-cloak" ng-show="true">     <div class="ng-modal-overlay">         <div class="ng-modal-close">             <div class="ng-modal-close-x">close</div>         </div>         <div class="ng-modal-dialog">             <div class="ng-modal-dialog-content">                 <div class="document-content-wrapper">                     <div class="document-content">                         <div ng-repeat="row in rows">                             <query-row rows="rows" remove-row="removerow(row)" add-row="addrow()"></query-row>                         </div>                         <div class="row">                             <button ng-click="submit()" class="btn btn-primary">submit</button>                             <button ng-click="cancel()" class="btn btn-info">cancel</button>                         </div>                     </div>                 </div>             </div>         </div>     </div> </div> 

css

.ng-modal {     position: fixed;     z-index: 9999;     top: 0;     left: 0;     width: 100%;     height: 100%; } .ng-modal-overlay {     position: absolute;     z-index: 9999;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: #282828;     opacity: 0.9; } .ng-modal-dialog {     z-index: 10000;     position: absolute;     top: 164px;     left: 53%;     width: 800px;     transform: translate(-50%, -50%);     -webkit-transform: translate(-50%, -50%);     -moz-transform: translate(-50%, -50%);     -ms-transform: translate(-50%, -50%);     -o-transform: translate(-50%, -50%);     padding: 10px;     background-color:#fff;  } .ng-modal-dialog-content {     overflow: hidden;     height: 100%; }  .ng-modal-dialog-input {     margin: 0px;     padding: 5px;     font-size: 36px;     width: 100%;     border: none;     background-color: #fff;     outline: 0;     color: #000;     font-weight:700;  }  .ng-modal-close {     position: absolute;     top: 15px;     right: 28px;  } .ng-modal-close-x {     font-family: arial, sans-serif;     display: inline-block;     cursor: pointer;     float: right;     font-size: 18px;     color: #fff; } .ng-modal-title {     font-weight: bold;     font-size: 200%;     display: block;     margin-bottom: 10px;     padding-bottom: 7px;     border-bottom: solid 1px #999; } 

plunker example: http://plnkr.co/edit/rfnsrc

first screenshot 1 row. screenshot 1 second screenshot 3 rows added, , can see how modal goes off screen on top. want remain fixed on top , grow towards bottom screenshot 2

here codepen, problem trying create new row, it's above not below, try putting in table. http://codepen.io/calendee/pen/buchf

  <a href="#" class="button" ng-click="addrow()">add row {{counter}}</a>  <table>   <thead>     <tr>   <th width="200">some header</th> </tr>  </thead>   <tbody>    <tr ng-repeat="rowcontent in rows">       <td>{{rowcontent}}</td>      </tr>     </tbody>     </table>     

and set css of .ng-modal-dialog follows:

height:900px; overflow-x: auto; 

let me know if works :)