Intrinsic flex rows are not correctly sized
Reported by
rmich...@edgeofthenet.org,
Jan 10
|
|||
Issue descriptionUserAgent: 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.
,
Jan 11
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.
,
Jan 11
|
|||
►
Sign in to add a comment |
|||
Comment 1 by vamshi.kommuri@chromium.org
, Jan 11