Highcharts width flow out of parent div - angularjs

Question

I am trying to create a dashboard where I want a chart made using highcharts and an action box in a row and in turn two buttons in action box in column. I want the action box to wrap the content and chart to take leftover space. But I am not getting expected result. The chart is taking more width than its parent div i.e. its container. Here is my HTML code.
<md-content flex layout-padding>
<md-card layout="row" layout-wrap>
<div flex layout-padding>
<highchart id="summary-chart" config="dashboard.chartConfig"></highchart>
</div>
<div layout-align="start center" layout="column" layout-padding>
<div layout-align="start center" layout-fill>
<img src="../../../assets/images/computer.png">
<label layout-fill>Computer</label>
</div>
</div>
</md-card>
</md-content>
Here is something that I expect:
This is what I am getting as result:
Note: The icon is hidden by the chart

Answer 1

To keep your chart from pushing outside its boundaries while maintaining your responsive layout, I would suggest the following.
First, give the flex div element that contains your Highcharts visualization its own ID (in this example, chartContainer):
<md-content flex layout-padding>
<md-card layout="row" layout-wrap>
<div flex layout-padding id="chartContainer">
<highchart id="summary-chart" config="dashboard.chartConfig"></highchart>
</div>
<div layout-align="start center" layout="column" layout-padding>
<div layout-align="start center" layout-fill>
<img src="../../../assets/images/computer.png">
<label layout-fill>Computer</label>
</div>
</div>
</md-card>
</md-content>
Next, whenever chartContainer div is resized, set the size of the highchart element to match the width and height of that div:
$(".chartContainer").resize(function () {
$('#summary-chart').highcharts().setSize(
$(".chartContainer").width(), // new width of the containing div
$(".chartContainer").height(), // new height of the containing div
false // don't animate the chart itself changing
);
});
Please note that I'm making an assumption that the highcharts element can be passed values using setSize() as with standard div elements.
Let me know whether this is helpful for you.

Answer 2

Add this code in your css file
.highcharts-container {
width:100% !important;
height:100% !important;
}