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

Posted 2023-03-05

【中文标题】为啥弹性项目仅限于父尺寸？

【英文标题】：Why is a flex item limited to parent size?为什么弹性项目仅限于父尺寸？

【发布时间】：2018-09-04 15:24:29

【问题描述】：

考虑以下示例...

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 中体验到这一点。还没有测试过跨浏览器，会和我一样更新。

【问题讨论】：

为什么它会超越其父级？

@VXp 为什么不呢？

显然是默认行为。

你的问题的解决方法是使用min-width而不是width，官方原因还不知道。

@TemaniAfif 因为您不希望容器包含比自身更大的东西。就能够理解布局而言，允许 默认 简直是疯了；它降低了您预测实际渲染大小的能力，使您能够了解每个正在渲染的对象的大小。

【参考方案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?

【讨论】：

更多关于 W3C 的信息here

@AndreiGheorghiu 我还添加了另一个有趣的链接来描述更多这种行为

@dippas 和 Afif。即使现在，正如您所指出的，它显然是 "describe-in-specs"，我仍然觉得它非常违反直觉：我的意思是，为什么需要将 flex-shrink 设置为当他们希望孩子 grow 超过父宽度时的特定值？在向学生教授 flexbox 时，需要从以下内容开始：“您将要听到的内容没有多大意义，但是……” 对吗？给出实际原因的是第二句话的最后一句话，但对于未来的学生来说，这将是棘手的。一个 flexbox 陷阱。 :)

@AndreiGheorghiu 我同意它一开始是反直觉的......但是如果我们有不同的想法呢？人们总是抱怨由于 width:100% + padding 而导致的溢出，当他们忘记 box-sizing 或一些边框或边距等时......所以我认为 Flexbox 提供了这个解决方案来最初避免这种情况，默认情况下他们设置 flex-缩小到 1 ...然后您必须根据需要停用它

我现在完全明白了。 Flex 从width 开始，并从中创建flex-basis。然后它尝试将所有 flex-children 放入 flex-parent 中。由于孩子可以收缩，所以它会收缩，如果不能收缩，它只会保持在width的值。