angular chart.js 未在 flexbox 中調整大小（收縮）

Question

看小提琴

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;
}

如果您縮小窗口以使布局彈出為垂直，則當您重新調整大小時，布局不會彈出

有沒有其他人發現這個並解決它？

Answer 1

我在這里找到了解決方案

當窗口變小時 Flex 項目不會縮小

min-width: 0;

在項目上:)

Answer 2

這對我的折線圖不起作用，我不得不使用：

canvas
{
    width: 100% !important;
}

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