angularjs - Why does my highchart only expand horizontally to fill its containing div, and not vertically? -

fiddle

i'm using highcharts-ng. in fiddle above, i've created simple case shows problem i'm having - when chart enclosed in div, expands horizontally fill it, not vertically.

why this? there way can make expand vertically well?

so won't let me post without code, here's what's in above fiddle:

html:

<div ng-app="myapp"> <div ng-controller="myctrl">     <div id="chartcontainer" >         <highchart id="chart1" config="chartconfig"></highchart>     </div> </div> 

css:

#chartcontainer { background-color: #af3456; width:777px; height:500px; padding:10px; 

}

javascript:

    //see: https://github.com/pablojim/highcharts-ng var myapp = angular.module('myapp', ["highcharts-ng"]);  myapp.controller('myctrl', function ($scope) {      $scope.chartconfig = {         series: [{             data: [10, 15, 12, 8, 7]         }],     }    }); 

if don't specify chart height in config, highcharts will:

by default height calculated offset height of containing element, or 400 pixels if containing element's height 0.

in case your "containing element" <highchart id="chart1"... (not <div id="chartcontainer" >) , since it's 0 height highchart uses 400 pixels.

see updated fiddle.