Skip to content

v 0.18 flex 1.0 doesn't work if the height of parent is indirectly determined by parent's siblings #5141

@janneo

Description

@janneo

1. issue

The html dom tree is:

The key properties are:

  1. body: flex-direction: column
  2. grandparent: align-items: stretch
  3. parent: flex-direction: column;
  4. me: flex: 1.0
  5. uncle: height: 100px

uncle has a fixed height 100px, so that the height of grandparent is the same as uncle, and parent should also be 100px high.

The height of me is expected to be 100px, however it's not.
We used only React/Layout.c to layout v 0.18.

React/Layout.c

Works well in chrome

2. source

<!DOCTYPE html>
<html>

    <head>
        <style>
            div {
                display: flex;
            }

        .body {
            background-color: #fff;
            height: 300px;
            flex-direction: column;
        }

        .grandparent {
            align-items: stretch;
        }

        .uncle {
            height: 100px;
            background-color: #0ae;
        }

        .parent {
            background-color: #fe0;
            flex-direction: column;
        }

        .me {
            flex: 1.0;
            background-color: #0fc;
        }
        </style>
    </head>

    <body id="body" class="body">
        <!-- grandparent -->
        <div class="grandparent">
            <!-- parent -->
            <div class="parent">
                <div class="me">
                    <label>"flex: 1.0" doesn't work on "me".</label>
                </div>
            </div>
            <!-- uncle-->
            <div class="uncle">
                <label>This is uncle</label>
            </div>
        </div>
    </body>

</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions