Flex, rendering of descending element fails

Question

Attached a sample. I am building a grid component, where the first column of the body can be frozen, the header supports pivoting of data and without having to set fixed width/heights. (the latter is deceivably difficult to accomplish because there is no easy end fast way to calculate the visible portion of elements inside an overflow:hidden box without moving up the entire DOM chain)

So I tried to make use of flex-box for its flexible nature to scale with the viewport available. Unfortunately I have an element that is not being rendered properly.

You can see the element .bodywrap .frozen with the backgroundcolor lime, being the issue. The rendering stops mid-way 'European Union'.

The content is rendered, but the background color is not. I can mitigate this by reading (.body).offsetHeight and then apply this as a fixed height via scripting but I prefer a CSS only solution if I can.

Anything I can do to solve this one?

function Throttle(ms, callback) {
    let lastCall = 0;
    return function () {
        let now = new Date().getTime(),
            diff = now - lastCall;
        if (diff >= ms) {
            lastCall = now;
            callback.apply(this, arguments);
        }
    };
}

function Grid(){
    this.head = document.querySelector('.head');
    this.body = document.querySelector('.body');
    this.frozenBody = document.querySelector('.bodywrap>.frozen');
    
    this.body.addEventListener('scroll', Throttle(5, this.Scroll.bind(this)));
}
Grid.prototype = {
    Scroll : function(){
        let scrollLeft = event.srcElement.scrollLeft;
        let scrollTop = event.srcElement.scrollTop;

        this.head.style.transform = `translateX(-${scrollLeft}px)`;
        this.frozenBody.style.transform = `translateY(-${scrollTop}px)`;
    }
}
new Grid();

html,margin{
    margin:0;
    border:0;
}
.outer{
    border:1px solid red;
    min-height:100px;
    height:400px;
    overflow:hidden;
}
.grid{
    position:relative;
    display:flex;
    height:100%; /* remove if outer has no height */
    flex-direction:column;  
}
.headwrap{
    display:flex;
    flex:1 0 auto;  
    flex-direction:row;     
    margin-right:20px; /* scrollbar width, to be calculated runtime */
    overflow:hidden;
    background:blue;
}   
    .headwrap .frozen{
        flex:0 0 auto;
        background:lime;
        z-index:1;
        /*display:none;*/       
    }
    .head{
        flex:1 1 auto;
        z-index:0;
    }
.bodywrap{
    display:flex;
    flex:1 1 auto;
    flex-direction:row;         
    overflow:hidden;    
}
    .bodywrap .frozen{
        flex:0 0 auto;
        background:lime;
        margin-bottom:20px; /* scrollbar height, to be calculated runtime * / 
        z-index:1;
        /*display:none;*/
    }
    .body{
        flex:1 1 auto;
        overflow:auto;
        background:silver;
        z-index:0;
    }
td{
    height:100px;
}

<div class="outer">
    <div class="grid">
        <div class="headwrap">
            <div class="frozen">
                <table border="1" style="width:150px">
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
            <div class="head">
                <table border="1" style="width:2000px;">
                    <tr>
                        <td colspan="4">2020</td>
                        <td colspan="4">2021</td>
                        <td colspan="4">2022</td>
                    </tr>
                    <tr>
                        <td>Q1</td>
                        <td>Q2</td>
                        <td>Q3</td>
                        <td>Q4</td>
                        <td>Q1</td>
                        <td>Q2</td>
                        <td>Q3</td>
                        <td>Q4</td>                     
                        <td>Q1</td>
                        <td>Q2</td>
                        <td>Q3</td>
                        <td>Q4</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="bodywrap">
            <div class="frozen">
                <table border="1" style="width:150px;">
                    <tr>
                        <td>North America</td>
                    </tr>                   
                    <tr>
                        <td>European Union</td>
                    </tr>
                    <tr>
                        <td>Africa</td>
                    </tr>
                    <tr>
                        <td>Asia</td>
                    </tr>
                    <tr>
                        <td>Africa</td>
                    </tr>
                    <tr>
                        <td>South America</td>
                    </tr>
                    <tr>
                        <td>Central America</td>
                    </tr>
                </table>
            </div>
            <div class="body">
                <table border="1" style="width:2000px;">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>                      
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>                      
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>                      
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>                      
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>                      
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>                      
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>                      
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>