Space between previous html element and flexbox. Why?

Question

I'm facing the challenge that adding display: flex to a div creates extra space between the previous html element and the div. Why is this?

jsfiddle illustrating the issue.

.flex-container {
  display: flex;
  flex: 0 100%;
}

<hr>
<div></div>
<hr>
<div class="flex-container"></div>
<hr>

Why the extra space created between the second hr and the flex-container? Inspection in Chrome yields 0 height for the flex-container.

Thanks!