chart js flexbox width ignored

[MS-AvivG]

I'm using Bulma v0.6.2 CSS framework with vue-chartjs 3.2.1, trying to put a Line chart inside a Box container. My chartjs options are all correct and as advised for achieving responsiveness:

responsive: true,
maintainAspectRatio: false

I also use a container for my chart as advised (the chart-container class property):

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

with the following chart-container CSS:

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

but it seems like the chart ignores the parent element's width:

I looked around found some hints that the issue may be related to Bulma and Flexbox. Did anyone encounter this issue?

EDIT: This jsfiddle reproduces the issue
https://jsfiddle.net/c6tu3qgx/1/

[revmischa]

I see this issue too, both using flexbox with flex-grow and with width: 100% on the parent container.
If I set the parent container to width: 99% this happens: https://v.usetapes.com/shbMyN8AVi
Using responsive: true etc

[M-Porter]

I was able to get the widths to be respected with flexbox fine.

.team-item {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    background-color: #FFFFFF;
    padding: 20px;
    margin-bottom: 15px;
}

.team-item__sentiment {
    flex: 0 1 20%;
    width: 20%;
    height: 40px;
    margin: -10px 0;
    position: relative;
}

<div class="team-item">
    <!-- some other dom -->
    <div class="team-item__sentiment">
        <canvas class="sentiment-spark"></canvas>
    </div>
    <!-- some other dom -->
</div>

// chart options
{
    responsive: true,
    maintainAspectRatio: false,
}

[revmischa]

My widths are being respected when the page renders or grows, but things go pear-shaped when you make the window narrower

[simonbrunel]

Isn't it the same issue as #4156 or #5397, some missing min-width: 0 on flex elements?

[benmccann]

Closing as duplicate

[miaulightouch]

nope, min-width: 0 not work with bulma.

ref: https://jsfiddle.net/pgg9pz7c/71/

[simonbrunel]

It works but your canvas is not in a dedicated div as recommended in the docs (see fiddle)

[miaulightouch]

now I place chart in dedicated div with no other elements, chart is not responsive when view width > 768px (it's breakpoint).

chart still responsive in view width < 768px because parent element is became display: block, not flexbox.

ref: https://jsfiddle.net/pgg9pz7c/81/

[phil-w]

I've been through the other tickets on this, but this seems to be the survivor. My example is a simple case with a full-width table with a column containing a sparkline:
https://jsfiddle.net/0rg1jesx/
This is a trivial example; my purpose is to point at this defect, not to demonstrate a good way to use HTML. In live I have a Bootstrap grid with a table of data in it, and the table rows contain sparkline charts as well as other data.

The charts grow beautifully, but won't shrink no matter what I try. Although its the same symptom as this apparent "flexbox" thing the problem persists even when the flexbox is removed. That's not the root issue.

[darkguy2008]

I'm having the same issue with bootstrap, we're in 2019 now. Any good examples of chart.js working with flexbox? grow works, shrink goes nuts.

Nevermind, changed to flot.js since it works better. No response from chart.js team anyways.

[labelworx]

I had all of the symptoms detailed above but this hacky fix seems to work fine. I have 4 charts displayed in a flexbox row shrinking perfectly.

canvas {
width: 100% !important;
}

[rokulis]

@labelworx is a hero!

[phil-w]

Yup, that fixes it, it overrides the absolutel width set by chart.js. Thanks!

[devandrepascoa]

canvas{
width:100% !import;
} worked! You saved my life :D 2 days struggling only thing not working in my entire website was the chart thanks!

[kurkle]

Setting overflow: hidden to the parents makes the chart able to shrink too: https://jsfiddle.net/h532o9gq/ (using v3-beta.4)