为什么弹性项目仅限于父尺寸？

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。如您所见here：

flex-shrink CSS 属性指定了 弹性项目。 Flex 项目将收缩以填满容器 flex-shrink 数字，当 flex 项目的默认大小较大时 比弹性容器。

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>

我们可以读到here also：

flex-shrink 属性指定 flex 收缩因子，它 确定 flex 项相对于其余部分将缩小多少 当负可用空间⁽¹⁾为时，弹性容器中的弹性项目 分布式。

此属性处理浏览器计算 flex 项的 flex-basis 值，发现它们太大 适应弹性容器。只要 flex-shrink 有一个积极的 重视项目将缩小，以使它们不会溢出 容器。

因此，通过将flex-shrink 设置为0，元素将永远不会缩小，因此您允许溢出（默认情况下，该值设置为1）。

---

^{(1) 负可用空间：当项目的自然大小加起来大于 flex 中的可用空间时，我们就有负可用空间容器。}

---

值得注意的是，设置 min-width: 150% 也会给出预期结果，因为另一个 flexbox 功能不允许 flex 项目缩小到其最小宽度（显式定义或固有定义）

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;
  min-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>

相关：Why don't flex items shrink past content size?