Issue metadata
Sign in to add a comment
|
Nested flexbox items not getting correct height
Reported by
pbogdan...@gmail.com,
Jun 27 2017
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Example URL: https://jsfiddle.net/md33715r/ Steps to reproduce the problem: (please see jsfiddle) 1. Set `html, body` to `height: 100%` 2. Set `body` to `display: flex; flex-direction: column;` 3. Set `display: flex; flex-direction: column; flex: 1;` on a parent element 4. Set `display: flex; height: 100px;` on a child element 5. Have another sibling element with the child that has `flex: 1` so it takes all available space. What is the expected behavior? The child element has 100px height as set. What went wrong? The height of the child element is not registered and it collapses when the sibling element is bigger than the viewport height. Otherwise works as expected. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 58.0.3029.110 Channel: n/a OS Version: OS X 10.12.3 Flash Version:
,
Jun 28 2017
,
Jun 30 2017
,
Jun 30 2017
The reason this works in Firefox is because they have working min-height: auto support in this case. This is a known bug in Chrome. (We shrink the .content div to the height of the body and therefore we later also shrink the header, because there's no space for it) In the meantime, I recommend putting "flex: none;" or "flex-shrink: none;" on the header. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by manoranj...@chromium.org
, Jun 27 2017