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="column">
  <div class="row">
    <div class="left">
      <div class="leftChild">
          <div id="container1" class="cont_highchart absolute"></div>
      </div>
      <div class="leftChild">
            <div id="container2" class="cont_highchart absolute"></div>
      </div>
      <div class="leftChild">
        <div id="container3" class="cont_highchart absolute"></div>
      </div>
    </div>
    <div class="right">
      <div class="rightChild">
          <div id="container4" class="cont_highchart absolute"></div>
      </div>
      <div class="rightChild">
          <div id="container5" class="cont_highchart absolute"></div>
      </div>
      <div class="rightChild">
          <div id="container6" class="cont_highchart absolute"></div>
      </div>
   
    </div>
  </div>
  <div class="footer">
    <button onclick="toggle()">
    toggle absolute
    </button>
  </div>
</div>
<script>
function toggle() {
  var lista = document.getElementsByClassName("cont_highchart");
  Array.from(lista).forEach(element => element.classList.toggle("absolute"));
}
</script>

CSS

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


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

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

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

/* Donde se van a meter los hightCharts, 
   - overflow: hidden (Cuando se nos salga de tamaño el highchart no nos afecte)
   - position: relative (para que cont_highchart pueda usar absolute)*/
.leftChild, .rightChild{
  height:33.33%;
  width:100%;
  position:relative;
  border:1px dashed tan;
  background:#a66;
  overflow:hidden;
}

/*Donde ponemos el highchart
  - Posicion absolute para que 
    no se tenga en cuenta en el calculo del padre cuando redimensionamos*/
.cont_highchart {
  width:100%;
  height:100%;
}

.absolute {
  position:absolute;
}

.hc_container{
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  background:yellow;
}

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

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,...