为什么flex-child限于父母大小？

Question

考虑以下示例......

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
}

<div class="parent">
	<div class="child">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna. 
	</div>
</div>

......我期待孩子width:150%在左右两个方向上成长并超过它的父母(因为它是水平居中的).

为什么不这样呢？

注意:我对从官方或可靠来源提取的答案感兴趣,理想地指出任何提及行为和任何可能的解决方法的错误或规范.

调试信息:在最新的Chrome,Ubuntu 17.10中体验这一点.还没有测试过跨浏览器,会像我一样更新.

Answer 1

你需要考虑flex-shrink.你可以在这里阅读:

flex-shrink CSS属性指定弹性项目的弹性收缩因子.当flex项的默认大小大于flex容器时,Flex项将根据flex-shrink数收缩以填充容器.

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
  flex-shrink: 0; /* added this */
}

<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
  </div>
</div>

我们也可以在这里阅读:

flex-shrink属性指定flex缩减系数,该系数确定当分配负可用空间⁽¹⁾时,flex项目相对于flex容器中其余flex项目的收缩 程度.

此属性处理浏览器计算弹性项目的弹性基础值的情况,并发现它们太大而 无法放入弹性容器中.只要flex-shrink 具有正值 ,项目就会缩小,以便它们不会溢出容器.

因此,通过设置flex-shrink到0该元素绝不会因此缩小您允许溢出(默认值设置为1).

^{(1)负空间:当项目的自然大小加起来大于 flex容器中的可用空间时,我们有负空闲空间.}