先看代码:

我的本意原是 既然我设置了父元素的 width 和 height,那肯定是需要让子元素的内容老老实实地待在父元素限定的 width 和 height 属性之内啊，但浏览器显示的却是子元素可以轻轻松松突破父元素的范围限制，导致子元素的内容跑到父元素的边界之外了

浏览器为什么要允许子元素可以超出父元素呢?或者当子元素超出父元素时,为什么不帮我报个错呢? 就如一个盒子，一个盒子里面怎么能装下一个比它更大的盒子?

展示效果不就相当于给你报错了吗

如果不溢出来，你是发现不了的
html 只是标记，浏览器只是把它转换成方便阅读的形式。

人家不是提供了 overflow:让你自己更灵活的处理嘛。

一个无聊的原因：这样可以方便地实现不占空间的装饰物。
另一个原因：因为一开始就是这样的，为了兼容性。

在没有 overflow 这个属性的年代呢

没有 overflow 的年代 HTML 不是设计来布局的，而是展示文档的，一般情况展示全 content 比它的 box 重要

1、传统上网页是文档而非程序，所以 HTML 和 CSS 一般不报错，而是尽量把内容展示出来。
2、问没有 overflow 属性的年代没什么意义，overflow 属性是在 98 年的 CSS 2 中提出的，而 CSS 定稿于 96 年底，所以这个年代只有一年多。而且那时的网页一般使用 HTML 属性而非 CSS 来排版，所以是否溢出需要自己控制，而且利用溢出可以实现很多效果。
3、"既然我设置了父元素的 width 和 height,那肯定是需要让子元素的内容老老实实地待在父元素限定的 width 和 height 属性之内啊"
待在父元素内也有 hidden 和 scroll 两种情况，也需要用 overflow 属性决定。

这样似乎更接近真实世界的模拟，就像你说的，一个盒子里面怎么能装下一个比它更大的盒子，但是你强行把一个大盒子装进一个小盒子里，会发生什么？总不能说因为你强行把大盒子塞进小盒子，它的尺寸就会因此变小吧。

允许超过是合理的，视界和实际大小并不冲突。

有没有让子元素缩小的办法

不要光把父元素理解为盒子，可以理解为视区，就能接受子元素更大的设定了。
比如各种 image slider view，还有上面说的 scroll，还有比如文本长度未定的溢出，还有背景图的 cover size，或者不同终端父元素的尺寸适配变化，等等。

子元素不要定义长宽百分比，改为定义 zoom ？

如果不允许超出，那么滚动条就不需要诞生了。

父元素设成 BFC 就可以被撑开了

子元素父元素你要会理解啊...
子元素实际上是以父元素为坐标系开始绘制的东西
父元素只提供一个坐标系而已