Non-spec behavior using alignItems: center #1704

New Issue

2024-09-25T09:39:19-07:00

Titozzz commented

2024-09-25 09:39:19 -07:00

(Migrated from github.com)

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 🫡

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/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](https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4EGmyBfHgPgBQCBMAByUACakExOBCakC+YSIQB3TJLgALDgGYADIYA0qkQAcwkyZlTYOAJgAsJhOYRgmOVAEk4pAC27AgA5EikqAEATqEA9ABUyFCBgZGIXj7I6aTRCHBQsqQyujJUMNgICXFmapyKAB40mNGkSHCYaBzhUEwwgaihqnxCdeJSMnIKSoTojc2t7Z2o3dFQ6qEjHiLj0rLyiso6pDg6cE6uGlq6F25zpA0AyjrRdgDWHIZ8CHFC+IkISgIILMMABfIPOCaXSeeoPABCYGImGICGcxjcpAAbpEEJh0AhYHk7B0vAgSDIkEiZOokRCGogqnEeNtRBI9lNDrNGojkSF0aY4U8Xu8OABGb6-DzAOLs0ijUSyiZCGXgaDwfhAA) # Expected Behavior When setting alignItems: center, content should stay within bounds. We made a reproduction in [codepen](https://codepen.io/Zephir77167/pen/ExqaQxq). ℹ️ Note: We are not sure using flexBasis is the best way to emulate a <Text> 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 <Node> to happen, see [this playground](https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4EGmyBfHgPgBQCBMAByUACakExOBCakC+YSIQB3TJLgALDgGYADIYA0qkQAcwkyZlTYOAJgAsJhOYRgmOVAEk4pAC27AgA5EikqAEATqEA9ABUyFCBgZGIXj7I6aTRCHBQsqQyujJUMNgICXFmapyKAB40mNGkSHCYaBzhUEwwgaihqnxCdeJSpPwI+IkIACoAEr4AyggAogAacwBKAIIIYgDyNGvz274A4hdr26uLpwBCAKoXCOS+i+vbe3P7AES7JhMP7VHgeETjaSyeSKZToRrNVrtTqobrRKDqUIjcFqSEyOQKJSEHSkHA6OBOVwaLS6SlueGkBrLHTROwAaw4hj4CDiQhmSUoCCCzDAAXyjLgml0nnqjIeYGImGICGcxjcpAAbpEEJh0AhYHk7B0vAgSDIkAqZOoFeKGogqnEwXUxhIoQTYYQGQ15YqQqrTLKmSz2RwAIzc3k44BxV2TDzR2OjUQxiZCaPgaDwfhAA). 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 🫡

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1704