DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Wrong layouting when width/height is set 100% #1794

New Issue
Open
opened 2025-03-04 16:58:25 -08:00 by ilya2204 · 1 comment
ilya2204 commented 2025-03-04 16:58:25 -08:00 (Migrated from github.com)
Copy Link

I found a few simple cases when layouting seems wrong. In these examples the width/height of the first element is set to 100% and the second to auto. And the second element overflows, although it should not

1:

<Layout config={{useWebDefaults: true}}>
  <Node
    style={{
      width: 300,
      height: 400,
      padding: 10,
      gap: 5,
      flexDirection: 'column',
    }}>
        <Node style={{height: '100%', width: 280}} />
        <Node
          style={{
            width: 280,
            height: 'auto',
            padding: 10,
            flexWrap: 'wrap',
          }}>
          <Node style={{margin: 5, width: 100, height: 30}} />
          <Node style={{margin: 5, width: 100, height: 30}} />
          <Node style={{margin: 5, width: 100, height: 30}} />
        </Node>
  </Node>
</Layout>

result:

Image

expected:

Image

2:

<Layout config={{useWebDefaults: true}}>
  <Node
    style={{
      width: 300,
      height: 400,
      padding: 10,
      gap: 5,
      flexDirection: 'row',
    }}>
        <Node style={{height: 380, width: '100%'}} />
        <Node
          style={{
          width: 'auto',
            height: 380,
            flexWrap: 'wrap',
          }}>
          <Node style={{margin: 5, width: 50, height: 200}} />
          <Node style={{margin: 5, width: 50, height: 200}} />
          <Node style={{margin: 5, width: 50, height: 200}} />
        </Node>
  </Node>
</Layout>

result:

Image

expected:

Image

for example, in the following html code, there are no such problems:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Layout</title>
</head>
<body>

<div style="
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 400px;
    padding: 10px;
    gap: 5px;
    background: #f0f0f0;">
    
    <div style="
        display: flex;
        width: 280px;
        height: 100%;
        background: lightblue;">
    </div>

    <div style="
        display: flex;
        flex-wrap: wrap;
        width: 280px;
        background: lightcoral;">
        
        <div style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            margin: 5px;
            background: lightgreen;">
            1
        </div>
        
        <div style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            margin: 5px;
            background: lightgreen;">
            2
        </div>
        
        <div style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 30px;
            margin: 5px;
            background: lightgreen;">
            3
        </div>
        
    </div>

</div>

</body>
</html>
I found a few simple cases when layouting seems wrong. In these examples the width/height of the first element is set to 100% and the second to auto. And the second element overflows, although it should not 1: ``` <Layout config={{useWebDefaults: true}}> <Node style={{ width: 300, height: 400, padding: 10, gap: 5, flexDirection: 'column', }}> <Node style={{height: '100%', width: 280}} /> <Node style={{ width: 280, height: 'auto', padding: 10, flexWrap: 'wrap', }}> <Node style={{margin: 5, width: 100, height: 30}} /> <Node style={{margin: 5, width: 100, height: 30}} /> <Node style={{margin: 5, width: 100, height: 30}} /> </Node> </Node> </Layout> ``` result: ![Image](https://github.com/user-attachments/assets/d110555b-4ef3-4052-89a9-06a1cb5dba98) expected: ![Image](https://github.com/user-attachments/assets/85074378-edd9-4a19-8b68-c074ccef4998) 2: ``` <Layout config={{useWebDefaults: true}}> <Node style={{ width: 300, height: 400, padding: 10, gap: 5, flexDirection: 'row', }}> <Node style={{height: 380, width: '100%'}} /> <Node style={{ width: 'auto', height: 380, flexWrap: 'wrap', }}> <Node style={{margin: 5, width: 50, height: 200}} /> <Node style={{margin: 5, width: 50, height: 200}} /> <Node style={{margin: 5, width: 50, height: 200}} /> </Node> </Node> </Layout> ``` result: ![Image](https://github.com/user-attachments/assets/dd89497f-d1a0-446a-b300-9915fe480725) expected: ![Image](https://github.com/user-attachments/assets/382836d7-4bf1-4791-ad08-51015d39bf97) for example, in the following html code, there are no such problems: ``` <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex Layout</title> </head> <body> <div style=" display: flex; flex-direction: column; width: 300px; height: 400px; padding: 10px; gap: 5px; background: #f0f0f0;"> <div style=" display: flex; width: 280px; height: 100%; background: lightblue;"> </div> <div style=" display: flex; flex-wrap: wrap; width: 280px; background: lightcoral;"> <div style=" display: flex; align-items: center; justify-content: center; width: 100px; height: 30px; margin: 5px; background: lightgreen;"> 1 </div> <div style=" display: flex; align-items: center; justify-content: center; width: 100px; height: 30px; margin: 5px; background: lightgreen;"> 2 </div> <div style=" display: flex; align-items: center; justify-content: center; width: 100px; height: 30px; margin: 5px; background: lightgreen;"> 3 </div> </div> </div> </body> </html> ```
aesdae commented 2025-05-17 00:27:34 -07:00 (Migrated from github.com)
Copy Link

setting flexShrink to 0 on the inner node solves both problems:

<Layout config={{useWebDefaults: true}}>
  <Node
    style={{
      width: 300,
      height: 400,
      padding: 10,
      gap: 5,
      flexDirection: 'column',
    }}>
        <Node style={{height: '100%', width: '100%'}} />
        <Node
          style={{
            width: '100%',
            height: 'auto',
            padding: 10,
            flexDirection: 'row',
            flexWrap: 'wrap',
            flexShrink: 0
          }}>
          <Node style={{margin: 5, width: 100, height: 30}} />
          <Node style={{margin: 5, width: 100, height: 30}} />
          <Node style={{margin: 5, width: 100, height: 30}} />
        </Node>
  </Node>
</Layout>

<Layout config={{useWebDefaults: true}}>
  <Node
    style={{
      width: 300,
      height: 400,
      padding: 10,
      gap: 5,
      flexDirection: 'row',
    }}>
        <Node style={{height: 380, width: '100%'}} />
        <Node
          style={{
            width: 'auto',
            height: 380,
            flexWrap: 'wrap',
            flexShrink: 0
          }}>
          <Node style={{margin: 5, width: 50, height: 200}} />
          <Node style={{margin: 5, width: 50, height: 200}} />
          <Node style={{margin: 5, width: 50, height: 200}} />
        </Node>
  </Node>
</Layout>
setting flexShrink to 0 on the inner node solves both problems: ``` <Layout config={{useWebDefaults: true}}> <Node style={{ width: 300, height: 400, padding: 10, gap: 5, flexDirection: 'column', }}> <Node style={{height: '100%', width: '100%'}} /> <Node style={{ width: '100%', height: 'auto', padding: 10, flexDirection: 'row', flexWrap: 'wrap', flexShrink: 0 }}> <Node style={{margin: 5, width: 100, height: 30}} /> <Node style={{margin: 5, width: 100, height: 30}} /> <Node style={{margin: 5, width: 100, height: 30}} /> </Node> </Node> </Layout> ``` ``` <Layout config={{useWebDefaults: true}}> <Node style={{ width: 300, height: 400, padding: 10, gap: 5, flexDirection: 'row', }}> <Node style={{height: 380, width: '100%'}} /> <Node style={{ width: 'auto', height: 380, flexWrap: 'wrap', flexShrink: 0 }}> <Node style={{margin: 5, width: 50, height: 200}} /> <Node style={{margin: 5, width: 50, height: 200}} /> <Node style={{margin: 5, width: 50, height: 200}} /> </Node> </Node> </Layout> ````
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Algorithm
Build and Infrastructure
C#
C++ Enhancement
CLA Signed
Discussion
Documentation
Feature Request
Java
JavaScript
Merged
Question
Reverted
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
YogaKit
YogaLayout ViewGroup
bug
dependencies
Pull requests that update a dependency file
duplicate
enhancement
fb-exported
fh:direct-merge-enabled
invalid
ruby
Pull requests that update Ruby code
wontfix
No Label
Algorithm
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
DaddyFrosty
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1794
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?