Flexbox column heights

Question

I have this site: http://kudos-topspindigital.azurewebsites.net/#/netball

If you open this in Chrome and IE you will see my issue. Basically in chrome, the right panels are around equal heights. I would like the bottom panels (the orange and dark gray one) to be twice as height as the top light gray panel. For once, IE has got it right. It actually resizes the bottom panels as flex: 2. How can I get chrome to do the same?

Answer 1

Since flex is a shorthand property, flex: 1 becomes

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

That 0% seems to confuse Chrome in column layouts. You can use flex-basis: 0 to fix it:

.row {
  flex-basis: 0;
}