NEW156958
flex-items not stretched when flex container has scroll 
https://bugs.webkit.org/show_bug.cgi?id=156958
Summary flex-items not stretched when flex container has scroll
safareli
Reported 2016-04-24 07:58:08 PDT
Here we have `.parent` flex-container with `height:50vh` and `overflow:auto`. it has two children. in `.child2` we have some `.content` and it's height is 100vh. so `.parent` is scrollable and i's scrollHeight is 100vh. **issue** is that height of flex-items:`.child1` and `.child2` will not be 100vh instead they will stay 50vh as if `.parent`'s height is still 50vh. **workaround** is to make `.parent` wrap by using it's `::after` pseudo element as flex-item with `height: 0` and `width:100%`. --- here is an [example](https://jsbin.com/dosapepeju/edit?html,css,output) of it. ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="parent"> <div class="child child1"></div> <div class="child child2"> <div class="content"></div> </div> </div> </body> </html> ``` ```css .parent{ height: 50vh; background: gray; display: flex; overflow: auto; } /* uncomment this declarations to make children of .parent stretch correctly */ /* .parent { flex-wrap: wrap; } .parent::after{ content:''; display:block; height: 0; width:100%; } */ .child2 { background: linear-gradient(blue, red); } .child1 { background: linear-gradient(orange, green); } .child{ display: block; flex: 1 1 50%; } .content{ height: 100vh; } ```
Attachments
Add attachment proposed patch, testcase, etc.
Note You need to log in before you can comment on or make changes to this bug.