New issue
Advanced search Search tips

Issue 920753 link

Starred by 3 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Intrinsic flex rows are not correctly sized

Reported by rmich...@edgeofthenet.org, Jan 10

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce the problem:
1. Create `display: flex`, `flex-directon: column` element with explicit height.

2. Inside the flex element, place an element with `display: grid`, `grid-template-columns: 1fr 1fr` to create a two track grid.

3. Add `flex-grow: 1` to the grid element.

What is the expected behavior?
I believe the grid element should grow to fill the height of the flex parent.

What went wrong?
The grid row remains the height of the content.

Did this work before? N/A 

Chrome version: Version 71.0.3578.98 (Official Build) (64-bit)  Channel: n/a
OS Version: OS X 10.12
Flash Version: Shockwave Flash 32.0 r0

Firefox expands the grid row track content to fill the flex-grown parent, the grid element.  This is not to suggest that Firefox is correct, and Chrome has a bug, but I am uncertain how to interpret the spec and where to ask for clarification.  However, Chrome seems like a decent starting point because Chrome >= 70 `grid-template-rows` has been discussed as problematic on stackoverflow (albeit it with more complicated case).  https://stackoverflow.com/questions/53064507/unexpected-css-grid-behavior-in-chrome-for-grid-template-rows

I have only skimmed the CSS Grid Module 1 specification to try and determine the correct behaviour.  From that reading, without `grid-template-rows` to create explicit row tracks, the row tracks are implicit and created based on `grid-auto-rows`.  The spec initial value of `grid-auto-rows` is `auto` (and is so in both browsers), but I am uncertain how to interpret `auto` in this context.  The specification indicates it may involve either `max-content` or `min-width`/`min-height` (neither of which are set explicitly, so I suppose their `auto` values are involved).

Here is a CodePen. Comparing Chrome 71.0.3578.98 and Firefox 64.0.2, Firefox vertically expands the grid row track content divs to fill the parent flex-grown element, while Chrome does not.

https://codepen.io/richardkmichael/pen/WLaGbZ?editors=1100

If this is Firefox bug, please let me know, and I will open a Bugzilla issue.
 
Labels: Needs-Triage-M71
Cc: vamshi.kommuri@chromium.org
Components: Blink>Layout>Flexbox
Labels: Triaged-ET
Thanks for filing the issue!

Tried checking the issue on reported chrome version 71.0.3578.98 using Mac 10.14.1 with the below mentioned steps.
1. Launched chrome
2. Navigated to https://codepen.io/richardkmichael/pen/WLaGbZ?editors=1100
Even we have observed difference in Chrome's and Firefox's behaviour.

As we are not very sure and clear about the correct/expected behaviour(i.e., is it the bug with Chrome or FF ?), adding component "Blink>Layout>Flexbox" and requesting someone from Dev team to help in clarifying this. 
Clarification on the expected behaviour helps us to triage this further in a better way.

Owner: cbiesin...@chromium.org
Status: Assigned (was: Unconfirmed)
Summary: Intrinsic flex rows are not correctly sized (was: Intrinsic grid rows are not correctly sized)

Sign in to add a comment