前一个html元素和flexbox之间的空间。为什么？

Question

我面临的挑战是，将display: flex添加到div会在前一个html元素和div之间创建额外的空间。为什么是这样？

jsfiddle说明了问题。

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

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

为什么在第二小时和flex容器之间创建了额外的空间？ 在Chrome中进行检查后，flex容器的高度为0。

谢谢！