New issue
Advanced search Search tips

Issue 866505 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 596743
Owner:
Closed: Sep 27
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 3
Type: Bug



Sign in to add a comment

Flexbox adaptive height not correct

Reported by frau...@gmail.com, Jul 23

Issue description

UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Example URL:
https://codepen.io/fraunos/pen/KBWLPG

Steps to reproduce the problem:
1. Create a SPA like flexbox page - 100vh height.
2. Create a flexbox navigation that wraps its items if the width is to small
3. Create a content div with flexbox
4. Decreasing page width now causes the nav to wrap over the content.

What is the expected behavior?
Flex should appropriately adjust height of elements to it's contents.

What went wrong?
Decreasing page width causes the nav to wrap over the content.

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: 67.0.3396.99  Channel: beta
OS Version: Manjaro
Flash Version:
 
Zrzut ekranu z 2018-07-23 17-00-40.png
381 KB View Download
Labels: Needs-Triage-M67
Components: -Blink Blink>Layout>Flexbox
Not sure what the codepen example is supposed to show.  The screenshot shows that the box is overflowing, though.
Status: Untriaged (was: Unconfirmed)
Labels: -Pri-2 Pri-3
Owner: cbiesin...@chromium.org
Status: Assigned (was: Untriaged)
You have to resize the window, so that the top div contents wrap, then the height is not correctly calculated. On Firefox it works as supposed, Chrome/Chromium overflows.
Zrzut ekranu z 2018-07-23 23-35-31.png
130 KB View Download
Zrzut ekranu z 2018-07-23 23-38-16.png
140 KB View Download
Mergedinto: 596743
Status: Duplicate (was: Assigned)
Workaround: give min-height: min-content to the first inner flexbox

Sign in to add a comment