Components with adaptive size

[janbuchar]

Let's say I have a component with width: 100% wrapped with sizeMe. Inside this component, I draw a canvas that has the exact same width, but specified in pixels (taken from the injected props). When I enlarge the window, it works as expected - the canvas gets bigger (of course - I don't need to shrink the canvas that makes the parent component wider). Is there a way to make the width adapt to window size after I resize it to a smaller size?

[ctrlplusb]

Hey @Teyras

Is there any chance you could throw together a codesandbox.io example?

[vasturiano]

Hi @ctrlplusb, thanks for your great work on this lib!

I'm hitting a similar scenario, related to having a responsive item inside a flexbox layout. I understand this is a common pitfall, but I just can't seem to get it to work.

I made an example here: https://codesandbox.io/s/9jrnp207rr

As described by @Teyras, the container adapts to width increases but not decreases.

Any help much appreciated.

[ctrlplusb]

Hey @vasturiano,

I added width=100% to your flexGrow div to ensure sizing propagates correctly for this case. 👍

https://codesandbox.io/s/7y8nw2or5q

[vasturiano]

Thanks for the quick reply @ctrlplusb!

I see, though making a flex element width=100% will essentially cancel the flexGrow effect. That element in reality has other siblings and it should grow to the available remaining width and no further.
After some prodding I discovered that adding width: 0 to the flexGrow element actually works. It's weird but does produce the desired effect.

Here's the fixed example, with a flex sibling: https://codesandbox.io/s/n5llmynjp

Thanks again for the awesome lib!

[DamianRivas]

Hi @ctrlplusb,

I have a very similar situation to Vasturiano's except I have two siblings with adaptive size. Unfortunately, the width: 0 trick doesn't work here :(

The problem is the same, it works for increasing size but not decreasing size. After reading through this issue, I tried a few things like giving both siblings width: 0, or both siblings width: 100%, but I can't get it to work: https://codesandbox.io/s/react-sizeme-flexgrow-responsive-8dy4r

The same thing happens with CSS Grid: https://codesandbox.io/s/react-sizeme-flexgrow-responsive-00p6s

Any help would be greatly appreciated.

[DamianRivas]

Got it! Looks like this workaround works just fine: #120 (comment)

But I'm confused as to why this double-nesting is necessary in the first place?

Anyway, this should do fine for our PWA layout. Here's the "fixed" example with flex: https://codesandbox.io/s/react-sizeme-flexgrow-responsive-4w5fi

CSS Grid: https://codesandbox.io/s/react-sizeme-flexgrow-responsive-00p6s