Okay, probably it is not a bug. 

Explanation: My .break-row element creates a new "Flex line". Even the element has 0px height, the "Flex line"s height does not follow the height of its items. So that empty space is the "Flex line" which contains the .break-row element.

Tested the issue on Win-7 and Win-10 using chrome reported version #63.0.3239.108 and latest canary #65.0.3310.0.
Attached a screen cast for reference.

Following are the steps followed to reproduce the issue.
------------
1. Opened https://jsfiddle.net/e9fkLcwe/4/
2. Clicked on a button which starts with "Break after ..."
3. Black lines are introduced.

roland@ - Could you please check the screen cast and please let us know if it is the issue. Also please let us explain what comment #2 actually mean.

Thanks...!!

Deleted: 798738.webm 2.3 MB

	798738.webm 2.3 MB View Download

Your video is correct, that was my issue.


We discussed this topic in my StackOverflow question in the comments: https://stackoverflow.com/questions/48078276/why-the-col-break-element-occupy-space-in-flexbox?noredirect=1#comment83138782_48078276

Michael_B explain how flexbox work in the following questions:
https://stackoverflow.com/questions/40890613/remove-space-gaps-between-multiple-lines-of-flex-items-when-they-wrap
https://stackoverflow.com/questions/42613359/how-does-flex-wrap-work-with-align-self-align-items-and-align-content

Based on these answers, the problem with my example is the following:

I use the default value align-content: stretch on the row element. I do this as I want the flex items to fill the vertical space of the row.

Now click on the "Break every 3 col", you will see the following:

green|red|green
grey
red

You will see this as we added a new element after the third flex item which has 100% width and it does not fit into the first line. <- 

row has flex-wrap: wrap; So the row is a multi-line flex container.

The flexbox sees that the 5 flex-item won't fit into one line. It calc how many Flex line needed. In this case: green|red|greed fits into the first flex-line, grey (100% width) fits into the second and red goes to the third flex-line.

Then flexbox does the align-items: stretch; and equally distributes the available vertical space between the 3 flex-lines.

So I can set height:0; to my break element, it does not matter as the flex line will follow the stretch with its height.

I'm not sure if it is according to the CSS flexbox specs, but Michael_B's explanation seems valid for this case and every browser I tried did the same.

Thank you for providing more feedback. Adding requester "krajshree@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot