css - 如何确保我的 Highcharts 不会破坏我的 flexbox 布局？

问题描述

我基本上有两个图表和一个侧边栏。

这是一个演示它的小提琴：

https://jsfiddle.net/NibblyPig/b54qjavu/

如果没有min-width: 0CSS，布局会被严重破坏，因为它会以某种方式从屏幕上延伸出来，即使父宽度为 100% 时这是不可能的。

如果不调用 javascript 底部的图表重排方法，图表就会溢出屏幕。

回流有点修复它，但尽管两个 divflex-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
        }]
    }]
        });
    });

标签： csshighchartsflexbox

css - 如何确保我的 Highcharts 不会破坏我的 flexbox 布局？

问题描述

解决方案

推荐阅读