UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36 OPR/40.0.2308.90

Example URL:
https://jsfiddle.net/s7cfbqzt/12/

Steps to reproduce the problem:
1. View https://jsfiddle.net/s7cfbqzt/12/ in Firefox (IE11, EDGE) and compare to Chrome.
2. See that the green DIVs are aligned differently in Chrome than all other browsers
3. Note that floating and flex-display is very similar across all browsers.

What is the expected behavior?
From my understanding, the other engines are doing it correctly, Chromium is at fault here.

Expected layout in ASCII-code (with 4 columns):
=======================
||                   ||
||  |1| |3| |4| |6|  ||
||  |2| | | |5| |7|  ||
||                   ||
||  |1| |2|          ||
||                   ||
=======================

What went wrong?
Actual layout in ASCII-code (with 4 columns):

=======================
||                   ||
||  |1| |3| |5| |7|  ||
||  |2| | | |6|      ||
||      |4|          ||
||                   ||
||  |1|              ||
||  |2|              ||
||                   ||
=======================

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 53.0.2785.143  Channel: stable
OS Version: 
Flash Version: Shockwave Flash 23.0 r0

The actual usage of this could result in more or less DIVs inside the container, the height of each DIV is dynamic.

The code in jsFiddle with float and flex is not really relevant to the issue but just to demonstrate the similarity in those areas.