JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

<div>
Click "container: 500px. 
The first time, chart resize is not correct.
The second time, correct.
</div>
<button id="collapse">container: 500px</button>
<button id="expand">container: 700px</button>

<br>

<div id="container" class="container">
    <div class="left" id="main0-box">
        <div id="main0" class="chart">
    </div>
    </div>
    <div class="right" id="main1-box">
        <div id="main1" class="chart">
    </div>

    </div>
</div>

CSS

.container {
    /* width: 500px; */
    display: flex;
    border: 1px solid red;
    padding: 5px;
}
.left {
    position: relative;
    height: 300px;
    flex: 0.5;
    border: 1px solid green;
}
.right {
    position: relative;
    height: 300px;
    flex: 1;
    border: 1px solid blue;
}
.chart {
    width: 100%;
    height: 100%;
    /* left: 0;
    top: 0; */
    position: relative;
}
#info {
    position: fixed;
    background: #000;
    border: 2px solid #eee;
    right: 10px;
    top: 10px;
    padding: 5px;
    width: 130px;
    height: 100px;
    color: #fff;
    box-shadow: 0 0 5px #000;
    font-size: 12px;
    z-index: 9999;
}

JavaScript

var expandBtn = document.getElementById('expand');
var collapseBtn = document.getElementById('collapse');
var container = document.getElementById('container');

expandBtn.onclick = function () {
    container.style.width = '700px';
    resize();
};
collapseBtn.onclick = function () {
    container.style.width = '500px';
    resize();
};

var option;

option0 = {
    xAxis: {},
    yAxis: {},
    series: {
        type: 'line',
        data: [[11, 22], [33, 44]]
    }
};
option1 = {
    xAxis: {},
    yAxis: {},
    series: {
        type: 'line',
        data: [[11, 22], [33, 44]]
    }
};

var main0 = document.getElementById('main0');
var main1 = document.getElementById('main1');
var main0Box = document.getElementById('main0-box');
var main1Box = document.getElementById('main1-box');
var chart0 = echarts.init(main0);
var chart1 = echarts.init(main1);
function resize() {
    console.log('before resize, main0-box', main0Box.offsetWidth);
    console.log('before resize, main1-box', main1Box.offsetWidth);
    chart0.resize();
    chart1.resize();
    console.log('after resize, main0-box', main0Box.offsetWidth);
    console.log('after resize, main1-box', main1Box.offsetWidth);
};
chart0.setOption(option0);
chart1.setOption(option1);