How can I ensure my Highcharts don't break my flexbox layout? - css

Question

I basically have two graphs and a sidebar.
Here's a fiddle demonstrating it:
https://jsfiddle.net/NibblyPig/b54qjavu/
Without min-width: 0 in the CSS the layout is badly broken with it stretching off the screen somehow even though that shouldn't be possible with a parent width of 100%.
Without calling the chart reflow method at the bottom of the javascript, the charts overflow off the screen.
Reflow kinda fixes it but despite both divs having flex-grow:1 they end up different sizes, again despite both having flex-grow: 1
If you resize the window itself, i.e. restore/maximise it the layout breaks even more, with the left div taking something like 20% of the width.
Any idea how I can fix this?
Pasted JS fiddle code below:
<div id='parent'>
<div id='columns'>
<div id='leftcolumn'>
<div id='chart1'>
</div>
<div id='chart2'>
</div>
</div>
<div id='rightcolumn'>
This is the right column.
</div>
</div>
</div>
CSS:
#parent {
display: flex;
width: 100%;
flex-direction: row;
height: 100vh;
min-width: 0;
}
#columns {
display: flex;
width: 100%;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
#leftcolumn {
display:flex;
flex-grow: 1;
flex-direction: row;
flex-shrink: 1;
min-width: 0;
}
#rightcolumn: {
flex-grow: 0;
display: flex;
width: 200px;
min-width: 0;
}
JS:
$(function () {
var myChart = Highcharts.chart('chart1', {
chart: {
type: 'bar'
},
title: {
text: 'Monthly Statistics'
},
xAxis: {
categories: ['ABC', 'DEF']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'This Month',
data: [4, 1]
}, {
name: 'Average',
data: [3, 2]
}]
});
var myChart2 = Highcharts.chart('chart2', {
chart: {
type: 'pie'
},
title: {
text: 'ABCDEF'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'AXD',
y: 67.34,
sliced: true,
selected: true
}, {
name: 'ERT',
y: 11.88
}, {
name: 'ASD',
y: 20.78
}]
}]
});
});

Answer 1

I've fixed this by applying flex-basis: 50% to the parent container and a call to resize upon first loading the page with window.setTimeout(function () { myChart.reflow(); myChart2.reflow(); });
Here is the updated fiddle:
https://jsfiddle.net/NibblyPig/b54qjavu/2/