Resize divs with default size risizing window

I have seen similar topic with answers about size in % or vh, but its a bit different.
I have a set of different plots with sizes 900×600 by default using this CSS:

.chartbox {
    display: flex;
    flex-wrap: wrap;
    background-color: DodgerBlue;
    justify-content: space-around;
}
.chart {
    background-color: #f1f1f1;
    width: 900px;
    height: 600px;
    margin: 10px;
    position: center;
}

how it looks

And I want them to resize automaticly when the window is resizing (or there is a small screen)
Im using charts from ECharts, with js code smth like:

var myChart = echarts.init(document.getElementById('main'));

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
    ]
};

myChart.setOption(option)

I tried to use % and vh to .chart height and width, but they conflict with default size.
I tried to use max-width and max-height without width and height, but charts do not appear (mb its a ECharts feature).
I expect the following:

1. if 3 charts 900×600 can fit the screen then place them
2. else if 3 charts 600×400 can fit the screen then place them
3. else if 2 charts 900×600 can fit the screen then place them
4. else if 2 charts 600×400 can fit the screen then place them
5. else if 1 charts 900×600 can fit the screen then place it
6. else if 1 charts 600×400 can fit the screen then place it
7. else resize as it possible