css - 为什么 flex 元素限制为父级大小？

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 中体验了这一点。尚未测试跨浏览器，会像我一样更新。

Answer 1

你需要考虑flex-shrink。如您所见here :

The flex-shrink CSS property specifies the flex shrink factor of aflex item. Flex items will shrink to fill the container according tothe flex-shrink number, when the default size of flex items is largerthan 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, whichdetermines how much the flex item will shrink relative to the rest ofthe flex items in the flex container when negative free space⁽¹⁾ isdistributed.

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

因此，通过将 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?