为什么弹性商品仅限于父代尺寸？

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>

正如我们在这里也可以阅读：

该柔性收缩属性指定 柔性收缩因子 ，其确定 多少柔性物品将相对收缩到的其余部分 的柔性物品 时在柔性容器 负的自由空间（1）的 分布 。

此属性处理浏览器计算flex项目的flex-basis值， 发现它们太大而 无法放入flex容器的情况 。只要flex-shrink具有正值， 这些项目就会收缩 ，以使它们 不会溢出 容器。

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

（1） 负自由空间 ：当项目的自然大小总和 大于 flex容器中 的可用空间 时，我们就有负自由空间。