Wrong layouting when width/height is set 100%

Nobody has claimed this yet.

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:

expected:

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:

expected:

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>

Reproduce both numbered layout examples and compare their results with the expected images and the provided HTML behavior. Trace the width and height resolution for the 100% and auto-sized flex children, then verify that both cases no longer overflow and match the expected layouts.

Written by the indexing model from the issue text.

Description

Contributor guide

First steps

Research direction

Assessment