Max Max - 6 months ago 11
HTML Question

Flexbox grand-child cannot set height as a percentage of parent's in Chrome

I am making a website that makes use of the

flexbox
. I have discovered a difference in the Firefox and Chrome implementations. To me, it seems like Chrome has incorrect behavior.

The issue is this. Let's say we have a
div
with
display: flex
and
flex-direction: row
. This div contains two children
c1
and
c2
. Both
c1
and
c2
will have the same height, which is the maximum height needed to fit the content in either child. If we add a child to
c1
(say
c11
), then this child (
c11
) cannot set its height as a percentage of its parent's (
c1
). In Firefox, this works fine. Here is a fiddle illustrating the difference (open in Firefox and Chrome):

https://jsfiddle.net/9pyn2urq/

Answer

In your hypothetical example, you need to create a new flex context for c1, and add align-items: stretch.

.c1 {
  display: flex;
  align-items: stretch;  
}

I modified your fiddle so that it uses these new rules. Also note that in the modified example, I remove height: 100% on #insideFlexy, since its parent, #flexy1, uses align-items: stretch.

enter image description here

https://jsfiddle.net/yo3x5bw5/

Comments