Chart height increases whenever the windows is resized when we use `height: '100%'`

Bug report

Codepen

Here is the codepen.

Explanation

When we have height: '100%', whenever the window is resized the chart height increases. You can see this in the codepen above by simply restoring down/maximizing the browser or by resizing the window. In my own app, the height keeps on increasing forever after the first resize, I couldn’t repro this in the codepen. Here’s a gif of the problem from my app:

I know that there’s this in the docs:

Note: If you provide a percentage value '100%', make sure to have a fixed height parent.

But isn’t using flex like that supposed to work? There’s no way I can give an explicit height to the parent, this just isn’t feasible when doing flexible layouts.

[BlvckParrot]

Hello, I still have this issue. I have parent container set to fixed height of 40vh and charts height set to 100% and It is still growing in size. The property min-height is still there and is probably causing the problem. I am using version 3.35.0.

[junedchhipa]

Sure, I have fixed it by removing minHeight to container when the height is ‘100%’.

In case, there is not enough padding at the bottom of the chart, you will have to manually add some padding. This will be the only caveat when using height: 100%