show flex使<hr />隐藏的原因是什么？

Question

https://codepen.io/adamchenwei/pen/GyWKab

HTML

<p> hr should appear below, but not </p>
<div>
  <hr />
</div>

<p> outside of a flex display, hr shows below correctly
<hr />

CSS

div {
  display: flex;
}
hr {
  width: 100%;
}