为什么 flex 项目限制为 parent 大小？

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>

...我期待 child 增长到 width:150% 并在左右方向（因为它水平居中）增长超过它的 parent。

为什么这没有发生？

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

调试信息：在最新的 Chrome、Ubuntu 17.10 中体验了这一点。还没有测试cross-browser，会像我一样更新。

Answer 1

你需要考虑flex-shrink。如您所见 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>

我们可以读到 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.

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

^{(1) 负自由 space：当项目的自然大小加起来时，我们有负自由 space 大于 flex 容器中可用的 space。}

值得注意的是，设置 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>

为什么 flex 项目限制为 parent 大小？

Why is a flex item limited to parent size?

css

centering

flexbox