Non-spec behavior using alignItems: center

Report

• I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

Here is a playground in which we can see that setting alignItems: 'center' actually allows the content to grow bigger than it's container.

Broken playground

Expected Behavior

When setting alignItems: center, content should stay within bounds.

We made a reproduction in codepen.

ℹ️ Note: We are not sure using flexBasis is the best way to emulate a component from react-native but it seems to be okay.

⚠️ Note 2: Fun fact, when using React Native and Old yoga errata settings (classic), this bug is harder to trigger as it needs an extra to happen, see this playground. I believe this has allowed this bug to be uncommon for most yoga users (that would be using react native). If more users start using a stricter errata, it will be a much bigger issue I believe.

Actual Behavior

The content overflows

Link to Code

See playground

Let me know if there is anything else that would be needed to get this fixed. Thanks 🫡

Start by reproducing the overflow in the linked Yoga playground and CodePen, comparing alignItems: 'center' with the shown flexBasis setup and errata settings. Trace the layout behavior responsible for content exceeding its container; done means the reproduction stays within bounds under the reported settings, including the stricter errata case.