JqGrid and flex experiment

<html>
  <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>    

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="script.js"></script>    
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="jqGrid-flex.css">


</head>
<body>
    <!--Flex stuff -->
    <div class="box fullSize">
      <div class="boxContentG1 box" style="background-color:#D0D0D0; padding:15px">
         <table id="list"></table>
          <div id="pager"></div>
      </div>

      <div class="boxContentG2 box" style="background-color:#00D0D0; padding:15px">
         <table id="list2"></table>
          <div id="pager2"></div>
      </div>
      <div class="boxFooter" style="text-align:right"><span>copyright</span></div>
    </div>
    
    <!-- Flex stuff end -->
</body>
</html>

$(document).ready(function() {
  
            var grid = $("#list"),
                mydata = [
                   {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
                ];
            var p = grid.parent();
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', key: true, width:70, sorttype:"int", frozen: true},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date", frozen: true},
                    {name:'name',index:'name', width:100},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                search:true,
                pager:'#pager',
                jsonReader: {cell:""},
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                autowidth:true,
                shrinkToFin:false,
                caption: "Multiple search with local data"
            });
            grid.jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:true,refresh:true},
                        {},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true});
            
            
            var grid = $("#list2"),
                mydata = [
                   {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
                   {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
                   {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                   {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
                ];
            var p = grid.parent();
            grid.jqGrid({
                datatype: "local",
                data: mydata,
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
                colModel:[
                    {name:'id',index:'id', key: true, width:70, sorttype:"int", frozen: true},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date", frozen: true},
                    {name:'name',index:'name', width:100},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                search:true,
                pager:'#pager2',
                jsonReader: {cell:""},
                rowNum: 10,
                rowList: [5, 10, 20, 50],
                sortname: 'id',
                sortorder: 'asc',
                viewrecords: true,
                autowidth:true,
                shrinkToFin:false,
                caption: "Multiple search with local data"
            });
            grid.jqGrid('navGrid','#pager2',{add:false,edit:false,del:false,search:true,refresh:true},
                        {},{},{},{multipleSearch:true, multipleGroup:true, showQuery: true});
                        
            //p.find(".ui-jqgrid > .ui-jqgrid-view").css("display","flex");//.css("flex","1").css("flex-direction", "column");
            //p.find(".ui-jqgrid > .ui-jqgrid-view").css("flex","1");
            //p.find(".ui-jqgrid > .ui-jqgrid-view").css("flex-direction", "column");
        });

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }



.box {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/* line 7, ../../app/styles/_layout.scss */
 .boxHeader {
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    flex: 0 0 auto;
}
/* line 12, ../../app/styles/_layout.scss */
 .boxContentG1 {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1;
    -webkit-box-flex: 1.0;
    overflow: auto;
    min-height:auto;
}
.boxContentG2 {
    -ms-flex: 1 1 auto;
    -webkit-flex: 3 1 auto;
    flex: 2;
    -webkit-box-flex: 1.0;
    overflow: auto;
}
/* line 18, ../../app/styles/_layout.scss */
 .boxFooter {
    -ms-flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    background-color: cornflowerblue;
}

.fullSize {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<html>
  <head>
    
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="frame_script.js"></script> 
  </body>
</html>

// Add your javascript here
$(function () {
  var topWindow = window.top;
  console.log("frame loaded");
  topWindow.postMessage("Hello", "*");
});

.ui-jqgrid {
  display: flex;
  flex-direction: column;
  flex:1 1 auto;
  width:auto !important;
}
.ui-jqgrid > .ui-jqgrid-view
{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  overflow:auto;
  width:auto !important;
}

 .ui-jqgrid > .ui-jqgrid-view,
 .ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-bdiv {
      flex:1 1 auto;
      width: auto !important;
}

.ui-jqgrid > .ui-jqgrid-pager,
.ui-jqgrid > .ui-jqgrid-view > .ui-jqgrid-hdiv {
    flex: 0 1 auto;
  width: auto !important;
}
/* enable scrollbar */
.ui-jqgrid-bdiv {
    overflow: auto
}