html - 为什么子div的内容会跳出父div？

Question

所以我正在做一个网页设计:http://codepen.io/wostensen/pen/woxYgX

但我终究无法理解为什么 .articles 不会留在 .primary 中。 overflow: hidden 没有给我满意的结果，因为我希望用户能够阅读所有的博客文章。 display: block 对任何父元素甚至相关元素都不做任何事情。

我可以看到，在 Debug模式 + 开发人员工具中，.articles 无缘无故地在 .primary 之外流动。页脚应该是网页的最后，内容刚好从中流过。

有什么我错过的吗？

Answer 1

在 .primary 类中，不要给它 height: 100%。将其更改为 auto(甚至删除它)

.primary {
  padding: 1em 1.5em;
  background: white;
  width: 75%;
  margin: 0 auto;
  height: auto;
}

让容器决定高度应该是多少，这也会考虑到它的 child

更新:

注意到 .primary(即 .content)的容器也有 height: 100%。也从此处删除(或使其成为 auto)。