NOTE: It seems new users can only post one screenshot. I left the descriptions, and removed the other two screenshots. It should be sufficient.
EDIT: I guess with this screenshot alone it is hard to see, but there should be four items in there. The demo is not modified.
I am working on a product that uses JUCE. We rely on the FlexBox component, and I found an odd behavior that I believe is a bug. It seems to happen with the demo, so I will just use that for my description.
The issue is with alignItems. To reproduce, you have to set all items to alignSelf::autoAlign. For the FlexBox itself, you can see the options I defined in each screenshot. Note that the issue only occurs with column as direction.
In the first screenshot, if I set align-items to ‘stretch’, the items don’t stretch as they should. (note that they do stretch if the direction is ‘row’.
In the second screenshot, align-items is set to flex-end, and the items just get spaced vertically (and some items disappear). If I resize the window vertically, the items don’t move, but if I resize it horizontally, the spacing vertically contracts/expands (opposite of what it should be).
The third screenshot just shows center, which also behaves as in the second screenshot.
It seems to me that somewhere in the resize function the wrong axis is being used for the calculation, but I don’t know that I can spend the time to debug this right now. I wanted to see if this was a known issue, and if people could reproduce it (just apply the same settings to the flexbox demo.
Please let me know if anyone experiences the same behavior, and whether it is indeed a bug. Thank you in advance.