title: Highcharts width flow out of parent div
body: <p>I am trying to create a dashboard where I want a chart made using <code>highcharts</code> and an action box in a <code>row</code> and in turn two buttons in action box in <code>column</code>. I want the action box to wrap the content and chart to take leftover space. But I am not getting expected result. The <code>chart</code> is taking more width than its <code>parent div</code> i.e. its <code>container</code>. Here is my HTML code.</p>
  
  <pre><code>&lt;md-content flex layout-padding&gt;
      &lt;md-card layout="row" layout-wrap&gt;
          &lt;div flex layout-padding&gt;
              &lt;highchart id="summary-chart" config="dashboard.chartConfig"&gt;&lt;/highchart&gt;
          &lt;/div&gt;
          &lt;div layout-align="start center" layout="column" layout-padding&gt;
              &lt;div layout-align="start center" layout-fill&gt;
                  &lt;img src="../../../assets/images/computer.png"&gt;
                  &lt;label layout-fill&gt;Computer&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/md-card&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p>Here is something that I expect: 
  <a href="https://i.stack.imgur.com/X2cR8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X2cR8.png" alt="enter image description here"></a></p>
  
  <p>This is what I am getting as result:
  <a href="https://i.stack.imgur.com/UdjQr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UdjQr.png" alt="enter image description here"></a></p>
  
  <p><strong>Note: The icon is hidden by the chart</strong></p>