New issue
Advanced search Search tips

Issue 876763 link

Starred by 1 user
Status: Duplicate
Merged: issue 784059
Owner:
cbiesinger@google.com
Closed: Sep 4
Cc:
viswa.karala@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Inside Flexbox, 1fr rows in CSS Grid do not grow vertically

Reported by h...@noahtye.com, Aug 22 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce the problem:
Open the attached file, which includes a CSS Grid layout inside a Flexbox layout.  Specifically, the element with `display: grid` is a child element with `flex-grow: 1` of the container element which has `display: flexbox`.

What is the expected behavior?
The elements in the grid (toolbar, left pane, right pane) should fill the extra space vertically, as Firefox and Safari render it.

What went wrong?
The elements in the grid (toolbar, left pane, right pane) do not fill up the entire space vertically.  The 1fr specification for both rows appears to have no effect, and those rows behave as if their grid-template-rows are `auto` rather than `1fr`.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 68.0.3440.106  Channel: stable
OS Version: OS X 10.13.6
Flash Version:
firefox_grid_inside_flexbox.png
167 KB View Download
safari_grid_inside_flexbox.png
102 KB View Download
chrome_grid_inside_flexbox.png
170 KB View Download
gridtest.html
1.0 KB View Download

Comment 1 by lgar...@chromium.org, Aug 22

Components: -Blink>Layout Blink>Layout>Grid Blink>Layout>Flexbox

Comment 2 by susan.boorgula@chromium.org, Aug 23

Labels: Needs-Triage-M68

Comment 3 by viswa.karala@chromium.org, Aug 24

Cc: viswa.karala@chromium.org
Labels: Triaged-ET Target-70 M-70 FoundIn-70 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on chrome reported version# 68.0.3440.106 and on latest chrome# 70.0.3530.0 using Linux 14.04, Mac 10.12.6 and Windows-10 with '.html' file provided in comment# 0. As this issue is seen from M-60(60.0.3112.0), hence considering this issue as Non-Regression and marking it as Untriaged.

Thanks!

Comment 4 by e...@chromium.org, Aug 26

Owner: cbiesinger@google.com
Status: Assigned (was: Untriaged)

Comment 5 by r...@igalia.com, Sep 4

Mergedinto: 784059
Status: Duplicate (was: Assigned)
I believe this is a duplicate of #784059.

As a workaround for this particular case, you can use "flex-basis: 0" in #nested-grid to get the expected output.
►

Sign in to add a comment