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

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

Closed
janneo opened this issue Jan 6, 2016 · 3 comments
Closed

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

janneo opened this issue Jan 6, 2016 · 3 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@janneo
Copy link

janneo commented Jan 6, 2016 •
edited
Loading

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>
@facebook-github-bot
Copy link
Contributor

Hey janneo, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

  • If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

@janneo janneo changed the title flex 1.0 doesn't work if the height of parent is determined by parent's siblings v 0.18 flex 1.0 doesn't work if the height of parent is determined by parent's siblings Jan 6, 2016
@janneo janneo changed the title v 0.18 flex 1.0 doesn't work if the height of parent is determined by parent's siblings v 0.18 flex 1.0 doesn't work if the height of parent is indirectly determined by parent's siblings Jan 6, 2016
@mikemonteith
Copy link

+1

@lacker
Copy link
Contributor

lacker commented Oct 26, 2016

React Native flexbox isn't supposed to work precisely the same as flexbox in the browser. It's operated by css-layout so it's slightly different. We've improved the docs a lot since January, so I think this is more clear now. I'm going to close this issue but if you think there's still an area where the RN behavior doesn't match the docs, then I think it would be great to open a new issue. A reproduction of the problem on rnplay.org is the best way to be helpful for that - that's somewhat more useful than comparison code to run in a browser. Thanks for pointing this issue out.

@lacker lacker closed this as completed Oct 26, 2016
@facebook facebook locked as resolved and limited conversation to collaborators Jul 20, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@lacker @mikemonteith @janneo @facebook-github-bot @react-native-bot