为什么 flex 项目受限于父尺寸? [英] Why is a flex item limited to parent size?

问题描述

考虑以下示例...

body {边距:0；}* {box-sizing: 边框框；}.父母{最小高度:100vh；宽度:50vw；边距:0 自动；边框:1px纯红色；显示:弹性；对齐项目:居中；对齐内容:居中；}.孩子 {边框:1px纯蓝色；宽度:150%；}

<div class="child"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Amettellus cras adipiscing enim eu turpis.Neque aliquam 前庭 morbi blandit.Sem 整数简历 justo eget magna.

...我期待孩子成长到 width:150% 并在左右方向上超过其父级(因为它水平居中).

为什么没有发生这种情况?

注意:我对从官方或可靠来源得出的答案很感兴趣，最好是指出任何提及行为的错误或规范以及任何可能的解决方法.

调试信息:在最新的 Chrome、Ubuntu 17.10 中体验过.尚未测试跨浏览器，会像我一样更新.

解决方案

你需要考虑flex-shrink.您可以在此处阅读:

<块引用>

flex-shrink CSS 属性指定了一个弹性项目.Flex 项目将根据以下情况收缩以填充容器flex-shrink 数，当弹性项目的默认尺寸较大比弹性容器.

body {边距:0；}* {box-sizing: 边框框；}.父母{最小高度:100vh；宽度:50vw；边距:0 自动；边框:1px纯红色；显示:弹性；对齐项目:居中；对齐内容:居中；}.孩子 {边框:1px纯蓝色；宽度:150%；弹性收缩:0；/* 添加了这个 */}

<div class="child"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Amettellus cras adipiscing enim eu turpis.Neque aliquam 前庭 morbi blandit.Sem 整数简历 justo eget magna.

我们也可以阅读这里也:

<块引用>

flex-shrink 属性指定了 flex 收缩系数，即确定弹性项目相对于其余部分的收缩程度当可用空间为负⁽¹⁾为时，伸缩容器中的伸缩项目分布式.

该属性处理浏览器计算flex 项目的 flex-basis 值，发现它们太大适应弹性容器.只要 flex-shrink 有正值将缩小以便它们不溢出容器.

因此，通过将 flex-shrink 设置为 0，元素将永远不会收缩，因此您允许溢出(默认情况下，该值设置为 1>).

---

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

---

值得注意的是，设置 min-width: 150% 也将给出预期结果，因为另一个 flexbox 功能不允许 flex 项目缩小超过其最小宽度(明确定义或内在定义)

body {边距:0；}* {box-sizing: 边框框；}.父母{最小高度:100vh；宽度:50vw；边距:0 自动；边框:1px纯红色；显示:弹性；对齐项目:居中；对齐内容:居中；}.孩子 {边框:1px纯蓝色；最小宽度:150%；}

<div class="child"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Amettellus cras adipiscing enim eu turpis.Neque aliquam 前庭 morbi blandit.Sem 整数简历 justo eget magna.

相关:为什么 flex 项目不会缩小到超过内容大小?

Considering the following example...

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>

... I'm expecting the child to grow to width:150% and outgrow its parent in both left and right direction (as it's centered horizontally).

Why doesn't this happen?

Note: I'm interested in answers drawing from official or reliable sources, ideally pinpointing any bug or specification mentioning the behavior and any possible workarounds.

Debug info: Experiencing this in latest Chrome, Ubuntu 17.10. Haven't yet tested cross-browser, will update as I do.

解决方案

You need to consider flex-shrink. As you can read here:

The flex-shrink CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default size of flex items is larger than the flex container.

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>

And as we can read here also:

The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space⁽¹⁾ is distributed.

This property deals with situations where the browser calculates the flex-basis values of the flex items, and finds that they are too large to fit into the flex container. As long as flex-shrink has a positive value the items will shrink in order that they do not overflow the container.

So by setting flex-shrink to 0 the element will never shrink thus you allow the overflow (by default the value is set to 1).

---

^{(1) Negative free space: We have negative free space when the natural size of the items adds up to larger than the available space in the flex container.}

---

Worth to note that setting min-width: 150% will also give the expect result due to another flexbox feature that doesn't allow a flex item to shrink past its minimum width (either explicitely defined or intrinsically defined)

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>

Related: Why don't flex items shrink past content size?

这篇关于为什么 flex 项目受限于父尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！