为什么弹性项目限制为父项大小? [英] Why is a flex item limited to parent size?

问题描述

考虑以下示例...

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%并在左右两个方向(因为它在水平方向上居中)都超出其父级.

... 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.

调试信息:在最新的Chrome Ubuntu 17.10中遇到此问题.尚未测试跨浏览器，将像我一样进行更新.

推荐答案

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

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

flex-shrink CSS属性指定了 弹性项目.柔性物品将收缩以填充容器，具体取决于 弹性项目的默认大小较大时 比flex容器.

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>

我们可以阅读在此处:

flex-shrink属性指定 flex收缩因子，该因子 确定弹性项目相对于其余项目的收缩程度 负可用空间⁽¹⁾为时，弹性容器中的弹性项目 分布式.

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.

此属性用于处理浏览器计算出 弹性项目的弹性基础值，并发现它们太大 以适合弹性容器.只要flex-shrink 具有正值 将物品的价值缩小，以使它们不会溢出 容器.

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.

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

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)负可用空间:当项目的自然大小加起来比flex中的可用空间}大时，我们就有负可用空间容器.

^{(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.}

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