Unexpected zero width for 100% width node #1827

New Issue

2025-07-10T04:38:36-07:00

yyalansavage commented

2025-07-10 04:38:36 -07:00

(Migrated from github.com)

Here the 50% width node has zero width - I would expect it here to be 50% width of its parent node so 250 / 2 . Perhaps this is something I don't understand about containing blocks, is this a bug or my misunderstanding?
Note if root node has default auto width/height, the 50% node is always the full width of the parent (regardless of the %age value); Only when root node has default alignItems:'stretch' does it show at expected 50%

<Layout config={{useWebDefaults: false}}>
  <Node style={{width:350, height:150, alignItems:'center'}}>
    <Node style={{padding: 10,width:'auto'}}>
      <Node style={{width: 250, height: 60}} />
      <Node style={{width: "50%", height:30 }}/>
    </Node>
  </Node>
</Layout>

result:

https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4EGmyBfHgPgBQCBMAByUACakExOBCakC+AO6ZJcABZsAzAFYADABoEm0jk1w2ARkMmwTHKgCScUgFt2AciSlUbgCcvPiEREXEpGTkFJUIABzBJSUxUbA5rYzUNbS9GOChggWEw8IlpWXlFZSytDgAmO1NzbEsOADYDPgQAelCS0TKoytjVdVqEACJDAFIJkzMLKx0DBD5e4vDuwb7gLcihXfBoeCEgA

Here the 50% width node has zero width - I would expect it here to be 50% width of its parent node so 250 / 2 . Perhaps this is something I don't understand about containing blocks, is this a bug or my misunderstanding? Note if root node has default auto width/height, the 50% node is always the full width of the parent (regardless of the %age value); Only when root node has default alignItems:'stretch' does it show at expected 50% ``` <Layout config={{useWebDefaults: false}}> <Node style={{width:350, height:150, alignItems:'center'}}> <Node style={{padding: 10,width:'auto'}}> <Node style={{width: 250, height: 60}} /> <Node style={{width: "50%", height:30 }}/> </Node> </Node> </Layout> ``` result: <img width="359" height="160" alt="Image" src="https://github.com/user-attachments/assets/12d8c30c-0de3-4bb8-be9f-705a5b0aee52" /> https://www.yogalayout.dev/playground?code=DwGQhgng9grgLgAgMZQHYDMCWBzAvAb3xgGcBTAdVICMARU9MGAGzmIC4EGmyBfHgPgBQCBMAByUACakExOBCakC+AO6ZJcABZsAzAFYADABoEm0jk1w2ARkMmwTHKgCScUgFt2AciSlUbgCcvPiEREXEpGTkFJUIABzBJSUxUbA5rYzUNbS9GOChggWEw8IlpWXlFZSytDgAmO1NzbEsOADYDPgQAelCS0TKoytjVdVqEACJDAFIJkzMLKx0DBD5e4vDuwb7gLcihXfBoeCEgA

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1827