flex-items not stretched when flex container has scroll
Reported by
i.safar...@gmail.com,
Apr 24 2016
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36 Example URL: https://jsbin.com/dosapepeju/edit?html,css,output Steps to reproduce the problem: 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. 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; } ``` What is the expected behavior? height of flex-items:`.child1` and `.child2` should be 100vh What went wrong? height of flex-items:`.child1` and `.child2` will not be 100vh instead they will stay 50vh as if `.parent`'s height is still 50vh. Does it occur on multiple sites: No Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? No firefox 45, safari 9 Chrome version: 49.0.2623.112 Channel: n/a OS Version: OS X 10.11.3 Flash Version: Shockwave Flash 21.0 r0
,
Apr 25 2016
The above issue is reproducible on All-OS (Windows (10 & 7), Mac 10.11.4 & Ubuntu 14.04) with chrome versions : 50.2661.87(Stable), 51.0.2704.22(Beta) & 52.0.2714.0(Canary). This is a non regression issue as can be seen from M30 build - 30.0.1549.0. Hence marking the same as Untriaged. Note: Observed similar behavior in Firefox 45 and safari. Thank you!
,
Apr 25 2016
Welcome! Hope to see this issue fixed soon. Also [here](https://github.com/philipwalton/flexbugs/issues/141) is it on flexbugs.
,
Apr 27 2016
Backgrounds aren't painted for visual overflow, this is intentional and as per spec. This also matches the behavior in Firefox.
,
Apr 27 2016
Also, parent's height is 50vh so child1 and child2 should be 50vh tall. scroll height does not matter for this purpose. |
|||
►
Sign in to add a comment |
|||
Comment 1 by tkent@chromium.org
, Apr 25 2016