ajustes Highchart flex vertical

by jpeter06

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div class="parent">
  <div class="center">
    <div class="left">
      <div class="left1">
        <div id="container1" class="cont"></div>
      </div>
      <div class="left2">
        <div class="hc_parent_container">
          <div class="hc_container">
            <div id="container2" class="cont"></div>
          </div>
        </div>
      </div>
      <div class="left3">
        <div id="container3" class="cont"></div>
      </div>
    </div>
    <div class="right">
    
    </div>
  </div>
  <div class="footer">
  
  </div>
</div>

CSS

html, body{
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  background:tan;

}


.parent{
  width: 100%;
  height: 100%;
  position:relative;
  background:yellow;
  display:flex;
  flex-direction:column;
}

.center{
  flex-grow: 2;
  background:#afa;
  display:flex;
  flex-direction:row;
}

.left{
  height:100%;
  width:50%;
  background:#fa0;
  display:flex;
  position:relative;
  flex-direction:column;
  overflow:hidden;
  justify-content:space-between ;
}

.left1{
  height:33%;
  width:100%;
  position:relative;
  background:#a66;
  overflow:hidden;
}
.left2{
  height:33%;
  width:100%;
  position:relative;
  background:#6a6;
  overflow:hidden;
}
.left3{
  height:33%;
  width:100%;
  position:relative;
  background:#66a;
  overflow:hidden;
}
.hc_parent_container{
  position:relative;
  height:200%;
  width:100%;
  background:red;
}
.hc_container{
  position:absolute;
  top:0px;
  left:0px;
  height:50%;
  width:100%;
  background:yellow;
}
.right{
  height:100%;
  width:50%;
  background:#aff;
}

.footer{
  height:40px;
  background:#aaf;
}

.cont {
  width:100%;
  height:100%;
  position:relative;
}

JavaScript

Highcharts.chart('container3', {

    title: {
        text: 'Solar 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }
    ],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

Highcharts.chart('container2', {

    title: {
        text: 'Solar 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Other',
        data: [12908,...