`proportions` in Container (`Rows` and `Columns`) do not work, if the component is added at a later stage

[Sn3llius]

Describe the bug

Container proportions for Rows and Columns are not functioning correctly. All the remaining space is left empty, and the children elements do not get the correct size (e.g., 1/3 of the available space), as demonstrated in the attached picture.

Expected Behavior:

Children should occupy the specified proportions of the available space (e.g., 1/3 each or homogeneous).

Actual Behavior:

All remaining space is left empty, and children elements do not occupy the correct size.

Steps to Reproduce

1. Create a container with Rows or Columns.
2. Set the proportions="homogeneous" parameter of e.g. Row for the child elements.
3. Observe the layout in the browser.

Screenshots/Videos

Operating System

Windows, MacOS, Linux

What browsers are you seeing the problem on?

Chrome, Firefox, Safari, Edge, Opera, Internet Explorer

Browser version

No response

What device are you using?

No response

Additional context

No response

[mad-moo]

For anyone looking into this, they seem to work fine if the component is visible from the start. They don't work, if the component is added at a later stage

[Sn3llius]

Good point! It behaves almost the same on Safari. However, as shown in the picture, it cuts some pixels off.

[Aran-Fey]

I'm not completely sure what the cause of this bug is, but I think ResizeObservers don't trigger on every change, which can lead to the calculated flex-grows being out-of-date. We've added a workaround with requestAnimationFrame that solves the issue in most cases, but there will almost certainly be cases where this bug still occurs.

[mad-moo]

I'm closing this, since we haven't seen the issue pop up anymore. Feel free to re-open, should it emerge from the dead