Chrome - Nested flex container - Flex item height using a percentage appears to be broken

[derek-smith]

Chrome doesn't support percentage height values on flex items. It works fine in IE11 and MS Edge. I haven't tested any other browsers and I've not checked if percentage heights are part of the spec or not (sorry, maybe this is a non-issue).

Here is a jsfiddle.

Line 25 in the CSS is the issue. It works fine if I use pixels though.

[derek-smith]

After playing around with this more and reading some of the other issues, I tested without nesting any flex containers and the percentage height works fine. It's as soon as you nest you run into trouble. Maybe its flex-grow on the flex item/nested flex container? I see that other people are having similar issues.

Updated jsfiddle.

[derek-smith]

So I was using flex: 1 0 auto and changed it to height: 100% and it fixed it. All I wanted was a flex-direction: column with 2 <div> inside. I wanted the top <div> to be variable height and the bottom <div> to take up the remaining space. My novice understanding was that I would set flex-grow: 1 on the bottom <div> to get what I wanted. Instead I had to use height: 100%. Maybe I'm not understanding something.

Updated jsfiddle

[philipwalton]

Yeah, I think this is probably a Chrome bug. The height is definite, and thus a percentage should work.

[avatarDr]

The same thing (percentage flex-base while flex-direction: column;) does not work in Opera. Though, it works fine in Firefox and IE.
It seems to be a very strange bug in Opera as it not only incorrectly calculates percentage height in flex, but also takes width to calculate any %-based values (tested on margin and padding). I.e. it shows calculated 144px top margin with (margin-top: 10%;), while the height of html was about 400px.

The workaround to make element occupy the remaining space is to set flex-grow: 1; (And forbid others to grow.)
I wonder if there is any way to make element take precise % of the parent.

[yairEO]

This is so fucked up... such an important issue that renders flexbox completely useless for Chrome.

[jpdevries]

Is this still reproducible in Chrome? I made this Codepen that appears to work as expected? Unless I'm not following http://codepen.io/jpdevries/pen/MaGVKG?editors=110

[philipwalton]

This is so fucked up... such an important issue that renders flexbox completely useless for Chrome.

@yairEO I understand it's frustrating when what you want to do doesn't work, but statements like this are neither true nor helpful.

[tshinnic]

Is this either of these two Chrome bugs?

• Issue 341310: Blink doesn't honor percent heights on children of "align-self:stretch" flex items in a fixed-height flex container
• Issue 542388: Nested flexbox Holy Grail layouts: inner flex:auto fails to expand to full height

These are important issues, and right now the only workaround I have is using JS on window resize events. The issue 341310 has been open since Feb 2014 and one attempted fix had to be reverted. It is beyond belief.

BTW: Have I missed where the two Chrome issues were described in the README.md ?

[philipwalton]

This bug isn't in the README since no workaround has been identified as of yet.

[tshinnic]

I noticed in another posting (forgotten where) someone 'solved' their flex problems using an intermediate <div> with position absolute and top/right/bottom/left of 0. I have inserted such into my tale of woe and it works like magic!

Instead of asking for flex to understand height/width 100% on nested <div>s, you simply pin the corners of the intermediate <div> to the corners of the surrounding <div>, which is apparently enough of a difference in requested features that it works. "Pin this to that is more direct" than please (correctly) compute your outer height and let me set my inner height to the same? Guess so.

My nested Holy Grail example showing the problem.
The same example except with the intermediate pos:abs <div>

    <div class="hglo_enclosure">
          <!-- the inner holy-grail -->
          <div class="hglo_container">

vs.

    <div class="hglo_enclosure" style="position: relative;">
       <div style="position:absolute;left:0;top:0;right:0;bottom:0">
          <!-- the inner holy-grail -->
          <div class="hglo_container">

Now I think I remember seeing you (@philipwalton) saying you thought support for pos:abs inside flex boxes would be changing in Chrome? Is this the kind of pos:abs usage you were referring too? I'm going to update my bug report to let the Chromium people know their suggested workaround didn't and that this pos:abs workaround does work. That might generate comments about Chrome and adding pos:abs div's willy-nilly? (See)

Is this a workaround where we can add this flex bug to your lists? It does seem to work with FF, Edge, and IE11, as well as now Chrome.

[tshinnic]

I got a "I guess that's okay" from the Chrome people.

[derek-smith]

@jpdevries yes it's still broken in Chrome. That codepen is just a workaround. In the .boxes style, comment out width: 100%, height: 100%, and uncomment flex: 1 0 auto. You will see that Chrome spaces out the flex items correctly vertically but doesn't provide any height even though they are set to height: 26%. This works in other browsers.

[derek-smith]

@tshinnic 👍

[philipwalton]

@tshinnic I reduced your test-case to make it a bit easier to follow.
http://codepen.io/philipwalton/pen/VvVoow

The absolute position trick is probably worth documenting. The only gotcha is it doesn't respect things like padding on the parent, but I suspect most people are familiar enough with absolute positioning to figure that out.

[philipwalton]

FWIW, the CSSWG currently recommends avoiding using percentages at all on padding/margin:
https://hg.csswg.org/drafts/rev/86681ff9c4e9

[shyamal890]

+1

[chibicode]

Using this codepen:
#84 (comment)

This seems to be fixed on Chrome 51

But not on Safari 9.1.1

[jpdevries]

I'm not sure if this could be considered a work around, but here is the codepen (from #84 (comment)) working in Safari
http://codepen.io/jpdevries/pen/VjryNK

had to set display:flex;flex-direction:column; on .FlexItem and flex-grow:1; on .FlexContainer

[benface]

If anyone's interested, here is the bug on WebKit: https://bugs.webkit.org/show_bug.cgi?id=137730

It doesn't seem to be getting a lot of attention, even though it's a pretty serious issue for some layouts... Of course the workaround to make flex items flex containers works, but it's annoying.

[gsnedders]

@benface And vitally, despite the title of this issue, it has nothing to do with nested flexboxes: it's purely about how percentages are resolved against the height property on flex items.

[dryoma]

I second, that works:

had to set display:flex;flex-direction:column; on .FlexItem and flex-grow:1; on .FlexContainer

Of course there is a downside: one can't have a row of elements with width in % inside .FlexItem. But I guess that is a rather uncommon scenario.

[mkurz]

https://bugs.webkit.org/show_bug.cgi?id=137730 has been marked as fixed.

[cluxter]

Still not fixed for Chrome in Linux, latest versions. Working like a charm in Firefox

[scott-ho]

I think this jsfiddle demonstrating nesting flex column with percentage flex-basis not working. http://jsfiddle.net/o3s68nes/49/. Edge and firefox display as desired.

[scott-ho]

I've reported a bug in chromium bugzilla https://bugs.chromium.org/p/chromium/issues/detail?id=872624

[scott-ho]

for reminding, assign any fixed height like height: 1px to the child column element will make space distribution work.

column parent
   column child 1 -- height: 1px; flex: 2 1 66%;
   column child 2 -- height: 1px; flex: 1 1 33%;