一段玄学的CSS代码，谁来解释一下？

Question

重新描述一下，当普通的div包裹着固定宽度的两个div子元素时，当浏览器窗口缩小时，会出现子元素“冲出”父元素的现象，当给父元素div增加inline-block的属性后，子元素和父元素就自适应了，也就是子元素不会冲出父元素，而父元素随着浏览器窗口大小自适应。

我想问的是这个现象的本质？以及inline-block在这里的影响？

<div class="outter">
  <div>1</div>
  <div>2</div>
</div>

.outter {
  background: red;
  padding: 5px;
  display: inline-block;
}

.outter div {
  width: 800px;
  margin: 5px;
  background: gray;
}

当浏览器宽度小于div时，就会发生这样的现象，

在父元素加上inline-block之后就正常了，求问为什么，这里inline-block发挥了什么作用

Answer 1

其实没有什么神奇的：

1. 块级元素，比如 div，默认宽度是父级的宽度，同时它的 overflow: visible，所以你会看到子元素比父元素还大
2. display: inline-block 之后，转为行级对外，块级对内，所以以子元素的宽度作为默认宽度

其实说白了，早年 HTML 和 CSS 没有布局这个概念，所有布局都是开发者在理解了渲染机制的基础上自己摸索出来的。

Answer 2

摘抄 《CSS世界》豆瓣读书第三章 3.2.1小节的一段来解释下。

3.2.1 深藏不露的 width:auto
我们应该都知道， width 的默认值是 auto。 auto 因为是默认值，所以出镜率不高，但
是，它却是个深藏不露的家伙，它至少包含了以下 4 种不同的宽度表现。
（1） 充分利用可用空间。比方说， <div>、 <p>这些元素的宽度默认是 100%于父级容器的。
这种充分利用可用空间的行为还有个专有名字，叫作 fill-available，大家了解即可。
（2） 收缩与包裹。典型代表就是浮动、绝对定位、 inline-block 元素或 table 元素，
英文称为 shrink-to-fit，直译为“收缩到合适”，有那么点儿意思，但不够形象，我一直把这种现
象称为“包裹性”。 CSS3 中的 fit-content 指的就是这种宽度表现。
（3） 收缩到最小。 这个最容易出现在 table-layout 为 auto 的表格中，想必有经验的
人一定见过图 3-4 所示的这样一柱擎天的盛况吧！
眼见为实，有兴趣的读者可以手动输入 http://demo.cssworld.cn/3/2-1...

div默认是display: block;width:auto;，所以（1）充分利用可用空间。所以跟着父级容器body变动而变动。
而把div设置为display:inline-block;width:auto;，则表现为（2）收缩与包裹。收缩到合适也就是宽度为子容器的width:800px;

Answer 3

display：inline-block：
简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
可以设置margin和padding属性。