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

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

您需要考虑

flex-shrink

。如您在这里阅读：

flex-shrink CSS属性指定d性项目的d性收缩系数。当 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; }<div >  <div >    <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容器中 的可用空间 时，我们就有负自由空间。