nivo Height of charts keeps increasing endlessly when using CSS grid or Flexbox

Describe/explain the bug The pie chart keeps on increasing its height inside a sematic flex grid.

To Reproduce Steps to reproduce the behavior: Have a pie chart inside a sematic UI flex grid Here is an example in sand box :https://codesandbox.io/s/semantic-ui-example-woriq?fontsize=14&hidenavigation=1&theme=dark

Expected behavior The svg rect height should be maxed at height of the container

Desktop (please complete the following information):

Browser [chrome]
Version [ 79.0.3945.130 (Official Build) (64-bit)]

Smartphone (please complete the following information): NA

Feb 10 '20 12:02 Snedden

As a workaround, I had to set a height in the container's CSS. max-height and flex-basis did not appear to have the desired effect.

This issue seems to affect the responsive Pie, Bar and Line components. I've not tried the others, yet.

Jun 04 '20 17:06 OllyHodgson

Same issue, but I'm using theme-ui...

Aug 07 '20 03:08 thedaviddias

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

Nov 05 '20 04:11 stale[bot]

It's still a current issue

Nov 05 '20 04:11 vdh

bump

Nov 24 '20 13:11 bengraves-five

any idea why this is happening ?

Dec 04 '20 11:12 astroanu

same problem no solution :(

Dec 06 '20 13:12 siavhnz

Yeah I was excited to use this software but also encountered this.

Jan 19 '21 08:01 jrussellfreelance

Probably the same issue as https://github.com/plouc/nivo/issues/109. Maybe try the workaround.

Jan 27 '21 17:01 LoicUV

bump

Feb 25 '21 08:02 hayriyigit

Same issue with bump

May 19 '21 13:05 vasilica33

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

Aug 17 '21 17:08 stale[bot]

The bug is still present at v0.73.1

See https://codesandbox.io/s/semantic-ui-example-forked-ps9x9

Aug 19 '21 08:08 greengiraffe

If you set the height of the parent div the issue goes away

https://github.com/plouc/nivo/issues/1734

Aug 26 '21 03:08 iKrushYou

This workaround was already suggested above: https://github.com/plouc/nivo/issues/867#issuecomment-638993290 It's not useful if the chart should scale dynamically with its parent, as is often desired when using flexbox.

Sep 28 '21 13:09 greengiraffe

Same here.

Oct 05 '21 20:10 marcospassos

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

Jan 04 '22 04:01 stale[bot]

As far as I can tell, this is still an issue. See https://github.com/plouc/nivo/issues/867#issuecomment-638993290 for a workaround.

Jan 05 '22 02:01 OllyHodgson

I can confirm that.

Jan 05 '22 11:01 marcospassos

Still an issue.

Jan 25 '22 16:01 malte94

Still same issue and when I set:

<div style={{position: "relative"}}>
        <div style={{ position: "absolute", width: "100%", height: "400px" }}>
             <ResponsiveLine />
        </div>
</div>

There are no chart inside, just blank