Canvas as styled component flexbox item resizing width and increasing height but not decreasing height

[SmartKoolAid]

So I have a pretty basic react app utilizing styled components, css grid, and flexbox.

You can find a fork/sandbox here

https://codesandbox.io/s/sparkling-frost-enloq

LandingPage is a Grid Container
ContentContainer is a Grid Item/FlexContainer

<ContentContainer> has a component <MainContent/> - this component is a styled <canvas><canvas/> element

const Canvas_ = styled(Canvas)`
 background: "red";
 flex: 1;
 min-width: 0;

I can notice in the dev tools that when i resize my page/device, the <canvas>height will increase but it will never decrease and is always over flowing.

The width is always responsive and changes no matter if its getting larger or smaller.
the height will always increase but it never will decrease.

Any thoughts? is this a bug of some sort or maybe i am doing something completely wrong. I am kind of new to react.

[SmartKoolAid]

https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size

This solved my problem

"You've applied min-width: 0 and the item still doesn't shrink?

Nested Flex Containers

If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto / min-height: auto on items at higher levels.

Basically, a higher level flex item with min-width: auto can prevent shrinking on items nested below with min-width: 0"

[larsjuvik]

Thanks so much for this, really helped me out! 😁
I had to set min-height: 0px to an element higher up in the HTML-structure, and now everything just works.
Cheers!