Responsive Highchart within draggable/resizable Panels using GridstackJS

Im a trying to implement Highcharts combined with GridstackJS so that I have draggable and resizable Panels containing Charts from Highcharts. The Problem I have is that the Charts do not grow and shrink as I am resizing the Grid-Stack-Item. They dont even size properly when they are first intialisized so they are always bigger or smaler then the Panel. Is there a way to make the Highcharts fit into the Panel and also resize the Chart as I am resizing the panel?

JSFiddle

HTML

<div class="row">
    <div class="col-sm-12">
        <div class="grid-stack ui-droppable">
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable">
                <h2 class="dragbox-header">Chart 1</h2>  
                <div class="dragbox-content" >
                    <div class="text-center"> Item 1</div>
                </div>  
            </div>  
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable">
                <h2 class="dragbox-header">Chart 2</h2>  
                <div class="dragbox-content" ></div>  
            </div>  
            <div class="dragbox grid-stack-item ui-draggable ui-resizable" data-gs-id="draggable" data-gs-width="4" data-gs-height="3">
                <h2 class="dragbox-header">Chart 3</h2>
                <div class="text-center" id="testChart"></div>
            </div>  
        </div>
    </div>
</div>

CSS

.dragbox{  
  margin: 5px 2px  20px;  
  background: #fff;  
  position: absolute;  
  border: 1px solid #ddd;
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
}  

.dragbox-header{  
  margin: 0;  
  font-size: 12px;  
  padding: 5px;  
  background: #f0f0f0;  
  color: #000;  
  border-bottom: 1px solid #eee;  
  font-family: Verdana;  
  cursor: move;  
  position: relative;
}  

.dragbox-content{  
  display: block;
  background: #fff;  
  margin:5px;  
  font-family: 'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;  
}  

.placeholder{  
  background: lightgray;  
  border: 1px dashed #ddd; 
  border-radius: 5px; 
}

JavaScript

$(function () {
    var options = {
        draggable: {handle: '.dragbox-header', scroll: false, appendTo: 'body'},
        placeholderClass: "placeholder",
        acceptWidgets: true,
        cellHeight: 60,
    };
    $('.grid-stack').gridstack(options);
}

var myChart;

document.addEventListener('DOMContentLoaded', function () {
  myChart = Highcharts.chart('testChart', {
      chart: {
          type: 'bar'
      },
      title: {
          text: 'Fruit Consumption'
      },
      xAxis: {
          categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
          title: {
              text: 'Fruit eaten'
          }
      },
      series: [{
          name: 'Jane',
          data: [1, 0, 4]
      }, {
          name: 'John',
          data: [5, 7, 3]
      }]
  });
});

You need to set the height of the chart container and call reflow method in the change event function:

$('.grid-stack').on('change', function(event, items) {
    var chartContainer = chart.renderTo;
    $(chartContainer).css(
        'height',
        $(chartContainer.parentElement).height() - $('#testChartHeader').height()
    );

    chart.reflow();
});

Live demo: https://jsfiddle.net/BlackLabel/rndx0j9s/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

Docs: https://github.com/gridstack/gridstack.js/tree/develop/doc#events