图表js flexbox宽度被忽略

Question

我正在使用Bulma v0.6.2 CSS框架和vue-chartjs 3.2.1，尝试将折线图放在Box容器中。我的chartjs选项都是正确的，并且建议我们做出响应：

responsive: true,
maintainAspectRatio: false

我也建议使用容器作为我的图表（chart-container 类属性）：

<UserActivity
v-bind:chart-data="datacollection"
v-bind:options="graphOptions"
class="chart-container"
/>

使用以下chart-container CSS：

.chart-container {
    position: relative;
    height: 40px;
}

但似乎图表忽略了父元素的宽度：

我环顾四周，发现一些提示，问题可能与Bulma和Flexbox有关。有人遇到过这个问题吗？

修改 这个jsfiddle再现了这个问题。 https://jsfiddle.net/c6tu3qgx/