Auto Expanding 100% High Kendo UI Grid

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.web.min.js"></script>
<div class="flex-container">
    
    <div class="header" id="header">
        Header
    </div>
   
    <div class="content">
        <div id="grid"></div>
    </div>
    
</div>

CSS

.flex-container {
    display: flex;     
    flex-direction: column;
    height: 100%;
}

.header {
    background: red; 
    height: 50px;
}

.content {
    background: green;
    flex: 1; /* Fill */
}

#grid
{
    border-width:0;
    height:100%;
}

html,
body
{
    margin:0;
    padding:0;
    height:100%;
}

html
{
    overflow:hidden;
}

JavaScript

var gridElement = $("#grid");

function resizeGrid() {
    gridElement.height($(window).height() - $("#header").height());
    gridElement.data("kendoGrid").resize();
}

$(window).resize(function(){
    resizeGrid();
});

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number", locked: true, width: "150px", },
                    ShipName: { type: "string",  width: "150px",},
                    ShipCity: { type: "string", width: "150px", }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
            field:"OrderID",
            filterable: false
        },
        "ShipName",
        "ShipCity"
    ]
});

resizeGrid();