Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ilya2204 opened this issue Mar 5, 2025 · 0 comments
Open

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

ilya2204 opened this issue Mar 5, 2025 · 0 comments
Labels
Algorithm

Comments

@ilya2204
Copy link

ilya2204 commented Mar 5, 2025 •
edited
Loading

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Algorithm
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@NickGerleman @ilya2204