Question

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

这里有个小提琴来演示它：

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

在CSS中没有min-width: 0的情况下，布局会严重破裂，即使父宽度为100％，也无法以某种方式延伸到屏幕上。

不调用javascript底部的图表重排方法，图表将从屏幕上溢出。

重排可以解决此问题，但是尽管两个div都具有flex-grow:1，但它们最终仍具有不同的大小，尽管两个div都具有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
        }]
    }]
        });
    });

Answer 1

我通过将flex-basis: 50%应用于父容器并在首次使用window.setTimeout(function () { myChart.reflow(); myChart2.reflow(); });加载页面时调用调整大小来解决此问题

这是更新的小提琴：

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

如何确保Highcharts不会破坏弹性框布局？

1 个答案: