У меня в основном два графика и боковая панель.
Вот скрипка, демонстрирующая это:
https://jsfiddle.net/NibblyPig/b54qjavu/
Без min-width: 0 в CSS макет плохосломано из-за растягивания экрана, даже если это невозможно при родительской ширине 100%.
Без вызова метода перекомпоновки диаграммы в нижней части javascript диаграммы переполняют экран.
Reflow вроде исправляет это, но, несмотря на то, что оба div'а имеют flex-grow:1, они заканчиваются разными размерами, опять же, несмотря на то, что оба имеют flex-grow: 1
Если вы измените размер самого окна, то есть восстановите / разверните егомакет ломается еще больше, с левым div, занимающим примерно 20% ширины.
Есть идеи, как это исправить?
Вставлен код скрипты JS ниже:
<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
}]
}]
});
});