Why is a flex item limited to parent size?

Question

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.

Answer 1

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?