2

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/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Max
  • 15,157
  • 17
  • 82
  • 127

1 Answers1

1

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/

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61