responsive behavior not working

I’m using two line charts along side in a bootstrap row, each inside a col.

Expected Behavior

It should snap back to normal size when the browser maximizes

Current Behavior

If the browser window is narrowed the canvas fills the row but when you maximize the window it doesn’t go back to how it was

Steps to Reproduce (for bugs)

1. put two canvases in to cols:

<div class="row">
        <div class="col"><canvas id="language-chart"></canvas></div>
        <div class="col"><canvas id="subject-chart"></canvas></div>
</div>

1. initialize 2 line charts like the docs tells you to
2. load the page in a maximized browser, everything’s normal
3. change the width of the browser to about the tablet width
4. go back to maximized

Environment

• Chart.js version: 2.7.2
• Browser name and version: Opera 51, Firefox latest

[simonbrunel]

That’s an issue with flexbox (your .col class), you need to explicitly set .col { min-height: 0 }, see #4156 (comment) and this fiddle.

[mokhosh]

well, that’s really good. can we do something about windows 10 as well?