Skip to content

Commit 2c22497

Browse files
committed
improve docs
1 parent 17ad1da commit 2c22497

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

docs/configuration/responsive.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,18 @@ chart.canvas.parentNode.style.width = '128px';
4141

4242
Note that in order for the above code to correctly resize the chart height, the [`maintainAspectRatio`](#configuration-options) option must also be set to `false`.
4343

44-
## Flex and Grid Containers
44+
## Flexbox Layout
4545

46-
The chart can automatically fit to the size of a parent flex or grid container. You must set the 'relative' parent element to also have a min-width of 0. This prevents overflow issues when the size of a container changes in response to media query breakpoints.
46+
To prevent overflow issues when using flexbox layout, you must set the flex child element to have a `min-width` of `0`.
47+
See [issue 4156](https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128) for more details.
48+
49+
```html
50+
<div class="grid-container" style="display: grid">
51+
<div class="chart-container" style="min-width: 0">
52+
<canvas id="chart"></canvas>
53+
</div>
54+
</div>
55+
```
4756

4857
## Printing Resizable Charts
4958

0 commit comments

Comments
 (0)