Nested FlexBoxs cause zero height elements causing overlaps.
Reported by
knpatr...@gmail.com,
Feb 11 2018
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3338.0 Safari/537.36 Steps to reproduce the problem: 1. Please load code pen item https://codepen.io/anon/pen/oEWgze on FF and Chrome and compare differences. 2. Observe the differences in overlap on chrome that is not of FF. 3. Use Chrome Inspector to see that the row-item divs are zero height and therefore overlap. What is the expected behavior? As per FireFox, there should not be overlap. What went wrong? divs are overridden due to zero height computation. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 66.0.3338.0 Channel: n/a OS Version: 10.0 Flash Version:
,
Feb 12 2018
Able to reproduce this issue on Mac 10.12.6, Win-10 and Ubuntu 14.04 using chrome reported version #64.0.3282.140 and latest canary #66.0.3344.0. This is a non-regression issue as it is observed from M60 old builds. Hence, marking it as untriaged to get more inputs from dev team. Thanks...!!
,
Feb 12 2018
,
Sep 27
You can work around this (in the testcase) by giving the inner flexbox a min-height: min-content; or flex-shrink: 0; |
||||
►
Sign in to add a comment |
||||
Comment 1 by krajshree@chromium.org
, Feb 11 2018