Element with height 100% in flex column rendered taller in Chrome 72+ than in Chrome 71 (stable)
Reported by
erik.rit...@caffeine.tv,
Dec 17
|
||||
Issue descriptionChrome Version : Version 73.0.3642.0 (Official Build) canary (64-bit) URLs (if applicable) : https://www.caffeine.tv/ESL OS version : macOS Version 10.14 (18A391) Behavior in Safari (if applicable): N/A Behavior in Firefox (if applicable): The full page is visible, same as Chrome 71 (stable) What steps will reproduce the problem? (1) Navigate to https://www.caffeine.tv/ESL (2) Resize the window to a wide aspect ratio (attached images use 1392px x 711px) (3) Observe that in Chrome 72 and 73, the page extends beyond the bottom of the page (The text "Sign up to chat with ESL and meet new people!" is not visible) What is the expected result? We expect all elements on the page to be visible. What happens instead? The bottom of the page is cut off. This appears to be because the div with class name "stage-frame__broadcastFrame___3zOHu" is taller in Chrome 72 & 73 than in Chrome 71 and the latest Firefox version. It's possible that there is a bug here relating to % heights inside a flex column, or complex calc expressions. However, since this behavior differs from other browsers and Chrome Stable, it appears that something changed in Chrome 72 to cause the issue. Feel free to reach out about any other repro steps or clarifications. Thanks!
,
Dec 18
,
Dec 18
Bisected to 155c1f2bf45369bc7130c89b88c75c2d3c915410
,
Dec 18
Ah, thank you so much for bisecting this! Judging from the description in the commit, it looks like I should just add `min-height: 0;` to resolve issues and then this bug can be closed out as an intentional breakage to conform to spec?
,
Dec 18
Yes, min-height: 0 on the flex item should resolve this. But I didn't expect that our behavior is different from Firefox. I don't have time to look into this as I'm on vacation until the new year; dholbert, do you have time to take a brief look at this?
,
Dec 18
Sure. I believe this is indeed a chrome bug (but Caffeine can work around it by adding "min-height:0" to the element with class="stage-frame__broadcastFrame___3zOHu") Here's a reduced testcase: http://jsfiddle.net/2d6ev7cb/ (In Caffeine's case, the innermost span is actually a video element. But it turns out you don't need a video to trigger the bug.) Firefox, Edge, and Safari all render this testcase with the text inside the black border there. Chrome (Dev Channel) renders the text as being *outside* the black border (i.e. it refuses to shrink the inner flex container to make room for its sibling other flex item) I think Chrome is being overzealous on applying percent heights, when computing the Automatic Minimum Size of the inner flex container. It's incorrectly using the inner flex container's "height: 100%" **when measuring that element's min-content size**. And that's not correct, because your min-content size is supposed to be an intrinsic measurement, regardless of your *specified* size in the given dimension.
,
Jan 15
Is this planned on being fixed in 72 or should we use `min-height: 0;`? |
||||
►
Sign in to add a comment |
||||
Comment 1 by tkent@chromium.org
, Dec 18