angular chart.js not resizing (shinking) in a flexbox

Question

See the fiddle

https://jsfiddle.net/m942h0wm/6/

HTML

<div class="container" ng-app="app">
  <div class="main">
    <p>Main</p>
  </div>
  <div class="aside">
    <canvas class="chart chart-doughnut" 
        chart-data="[10,20,40]" 
        chart-labels="['one', 'two', 'three']">
    </canvas>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  border: solid 10px;
}

.main {
  flex-grow: 2;
  flex-basis: 300px;
}

.aside {
  flex-grow: 1;
  flex-basis: 200px;
}

if you shrink the window so the layout pops to vertical, when you resize back up the layout doesn't pop back

has anyone else found this and solved it?

Answer 1

I found the solution here

Flex items not shrinking when window gets smaller

min-width: 0;

on the items :)

Answer 2

That did not work for my linechart, I had to use :

canvas
{
    width: 100% !important;
}

from https://github.com/jtblin/angular-chart.js/issues/614