Wijmo 5 [Flexbox and FlexGrid]

Flexgrid used inside flexbox

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
  <header style="background: gray">
        This is the header.
    </header>

    <breadcrumb style="background: yellow">
        This is the breadcrumb.
    </breadcrumb>

    <content style="background: green">
        <left-pane style="border: 1px solid black">
            Left.
        </left-pane>
        <center-pane style="border: 1px solid black">
            <div id="grid10000" class="grid"></div>
        </center-pane>
        <right-pane style="border: 1px solid black">
            Right.
        </right-pane>
    </content>

    <footer style=background: gray>
        This is the footer.
    </footer>

CSS

html, body {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
body {
 display: flex
}

header {
}

breadcrumb {
}

footer {
}

content {

}

left-pane {
    width: 200px;
    flex: none;
}

center-pane {
 
}

right-pane {
    width: 100px;
    flex: none;
}

.grid {
  min-height: 0;
}

JavaScript

$(document).ready(function () {
            $('.grid').height($('content').height()-2);
            $(window).resize(function () {
                var headerHeight = $('header').height();
                var breadcrumbHeight = $('breadcrumb').height();
                var footerHeight = $('footer').height();
                var contentHeight = $(window).height() - (headerHeight + breadcrumbHeight + footerHeight);
                $('.grid').height(contentHeight-2);
            });
            // generate some random data
            function getData(count) {
                var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                  data = [];
                for (var i = 0; i < count; i++) {
                    data.push({
                        id: i,
                        country: countries[i % countries.length],
                        downloads: Math.round(Math.random() * 20000),
                        sales: Math.random() * 10000,
                        expenses: Math.random() * 5000
                    });
                }
                return data;
            }

            // create grids
            var g10000 = new wijmo.grid.FlexGrid('#grid10000');
            g10000.itemsSource = getData(100);
        });