孩子的绝对定位为什么会使父母的身高崩溃？

Question

请不要将此问题标记为重复，因为我之前从未有人问过。我知道那个position：absolute将元素从流中移出，但这并不能解释为什么其父级的高度塌陷为0。如果我有这个标记：

<div class="container">
  <div class="inside">
    some content
  </div>
</div>

然后我添加以下样式：

.container {
background-color: red;
position: relative;
}

.inside {
background-color: green;
position: absolute;
}

对孩子应用绝对定位将使容器的高度折叠为0。使其可见的唯一方法是应用高度，而不是百分比。

有人知道为什么会这样吗？ 有没有办法使它不发生？

预先感谢