div with flex-grow produces wrong output when converted to base64 image

Question

I have the following html and I'm trying to convert it into a base64 image. But decoding the base64 code produces the wrong image. Here's my code. I need to get the base64 encoding of the image which I need to pass to a PHP variable. Where am I going wrong here? Is there a better way?

CSS:

body {
    color: rgb(0, 0, 0);
    font-family: Helvetica, Arial, sans-serif;
    height: 100%;
    font-size: 14px;
}

div {
    display: block;
}

.divtable {
    border-top: 1px solid #eceff1;
    margin: 0 -16px;
    word-break: break-all;
}

.tablerow {
    border-bottom: 1px solid #eceff1;
    text-decoration: none;
    color: #000;
    display: flex;
}

.tablecol {
    line-height: 1.5em;
    padding: 10px 15px;
    flex: 1;
}

.bar {
    border-radius: 3px;
    background: #eee;
    display: inline-flex;
    width: 100%;
}

.text {
    display: inline-block;
    background: #04b;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
}

.a {
    background: #28EB52;
}
.b {
    background: #F0FF0D;
}

HTML/JS:

<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<div class="divtable">
    <div class="tablerow">
        <div class="tablecol">Label</div>
        <div class="tablecol">
            <div class="bar">
                <div class="text a" style="flex-grow: 8">8</div>
                <div class="text b" style="flex-grow: 15">15</div>
            </div>
        </div>
    </div>
</div>
<script>html2canvas(document.body).then(canvas => {
    console.log(canvas.toDataURL('image/png'));
});</script>