为什么Flex项仅限于父级大小？

Question

为什么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%;}

<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，Ubuntu17.10。还没有测试过跨浏览器，会像我一样更新。

Answer 1

你得考虑一下flex-shrink..就像你能读到的这里:Flex-收缩CSS属性指定FLEX项的FLEX收缩因子。挠曲物品将收缩以填充容器。根据屈折收缩号，当Flex项的默认大小更大。&nbsp;而不是柔性容器.body&nbsp;{ &nbsp;&nbsp;margin:&nbsp;0;}*&nbsp;{ &nbsp;&nbsp;box-sizing:&nbsp;border-box;}.parent&nbsp;{ &nbsp;&nbsp;min-height:&nbsp;100vh; &nbsp;&nbsp;width:&nbsp;50vw; &nbsp;&nbsp;margin:&nbsp;0&nbsp;auto; &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;red; &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;justify-content:&nbsp;center;}.child&nbsp;{ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;width:&nbsp;150%; &nbsp;&nbsp;flex-shrink:&nbsp;0;&nbsp;/*&nbsp;added&nbsp;this&nbsp;*/}<div&nbsp;class="parent"> &nbsp;&nbsp;<div&nbsp;class="child"> &nbsp;&nbsp;&nbsp;&nbsp;<p>Lorem&nbsp;ipsum&nbsp;dolor&nbsp;sit&nbsp;amet,&nbsp;consectetur&nbsp;adipiscing&nbsp;elit,&nbsp;sed&nbsp;do&nbsp;eiusmod&nbsp;tempor&nbsp;incididunt&nbsp;ut&nbsp;labore&nbsp;et&nbsp;dolore&nbsp;magna&nbsp;aliqua.&nbsp;Amet&nbsp;tellus&nbsp;cras&nbsp;adipiscing&nbsp;enim&nbsp;eu&nbsp;turpis.&nbsp;Neque&nbsp;aliquam&nbsp;vestibulum&nbsp;morbi&nbsp;blandit.&nbsp;Sem&nbsp;integer&nbsp;vitae&nbsp;justo&nbsp;eget&nbsp;magna.&nbsp;&nbsp;</div></div>正如我们所能读到的这里也是:Flex-收缩属性指定挠曲收缩因子，这决定了的其他部分相比，Flex项会收缩多少？&nbsp;柔韧物品在Flex容器中负自由空间(1)是&nbsp;分布式.此属性处理浏览器计算FLEX项的FLEX基值的情况，发现它们太大了&nbsp;将其放入Flex容器..只要收缩有一个积极的&nbsp;值，项目将收缩。为了让他们不要溢出集装箱。所以通过设置flex-shrink到0元素将不会收缩，因此允许溢出(默认情况下，该值设置为1).(1)&nbsp;负自由空间*当物品的自然尺寸加在一起时，我们有负的自由空间。大于可用空间在柔性容器里。

Answer 2

即使是现在，你指出的，很明显“规格描述”，我仍然觉得这完全违反直觉：我的意思是，为什么要设置flex-shrink当他们想要孩子长势超过父母宽度？当向学生教授柔性箱时，首先需要：“你将要听到的没有什么意义，但是.”对吗？这是第二句引文的最后一句，给出了实际的原因，但对于未来的学生来说，这将是一个棘手的问题。柔韧性盒。*)

Answer 3

我同意这是一种竞争-第一次直觉.但如果我们的想法不同呢？人们总是抱怨宽度过大：100%以上的填充，当他们忘记盒子大小，或一些边框或边缘，等等。因此，我认为Flexbox附带了这个解决方案，最初是为了避免这种情况，默认情况下，他们将Flex收缩设置为1.如果你想的话，你必须去激活它&nbsp;