v 0.18 flex 1.0 doesn't work if the height of parent is indirectly determined by parent's siblings #5141
Description
1. issue
The html dom tree is:
The key properties are:
- body:
flex-direction: column- grandparent:
align-items: stretch- parent:
flex-direction: column;- me:
flex: 1.0- 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>