Chrome & Firefox inconsistently handle flex-direction: column

[thomassuckow]

https://jsfiddle.net/thomassuckow/ebu59jxe/

Expected:

Actual:

What is weird is in chrome, resizing vertically and sometimes on load chrome shows what I expect. Resizing horizontally or printing triggers the actual behaviour. Firefox always shows actual.

[philipwalton]

Have you reported this bug to Chrome? http://chromiumbugs.appspot.com/

Since the layout changes when you resize the browser, it seems like it's just a layout bug in Chrome and there's not going to be a workaround.

[thomassuckow]

I havn't yet. Partially because I am not certain what I expected is correct, because it isn't what Firefox does either.

And also because I am seeing some other behaviours that I haven't tried to isolate yet and they could be the same issue manifesting in a different way or a different issue altogether.

In my experience unless you bug is very clear cut it will never get triaged on chromiumbugs. I was hoping maybe others had seen this behaviour here and could help me narrow down how it truly 'should' behave and as much as possible about what it triggering it not to behave that way so we can file bugs in the appropriate places.

[jpdevries]

I was wondering if using JavaScript to trigger a resize event could be a potential hacky work around but it seemed to have no effect

window.dispatchEvent(new Event('resize'));

[asvny]

@thomassuckow @philipwalton @jpdevries
https://jsfiddle.net/ebu59jxe/2/ I tried an workaround to match Expected ... I added align-content: flex-start and fill width using calc