JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>

<h1>✅ Fixed height grid</h1>
<div style="height: 200px" id="grid1"></div>

<h1>✅ Percentage height grid inside fixed container</h1>
<div style="height: 200px">
    <div style="height: 100%" id="grid2"></div>
</div>

<h1>❌ Max height inside fixed container</h1>
<div style="height: 200px; overflow: hidden">
    <div style="max-height: 180px" id="grid3"></div>
</div>

<h1>❌ Flex grow inside fixed flexbox</h1>
<div style="display: flex; flex-direction: column; height: 400px; overflow: hidden">
    <div class="fixed-placeholder"></div>
    <div style="flex: 1" id="grid4"></div>
    <div class="fixed-placeholder"></div>
</div>

CSS

@import url("https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid-lite.css");

.fixed-placeholder {
    height: 100px;
    width: 100px;
    background-color: red;
}

JavaScript

const dataTable = {
    columns: {
        product: Array(20).fill('key'),
        weight: Array(20).fill(0).map((_, i) => i)
    }
};

['grid1', 'grid2', 'grid3', 'grid4'].forEach(id => Grid.grid(id, { dataTable }));