primer - selector de hijos en css

¿Por qué un artículo flexible está limitado al tamaño de los padres?

Question

Considerando el siguiente ejemplo ...

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>

... Espero que el niño crezca al width:150% y supere a su padre en dirección izquierda y derecha (ya que está centrado horizontalmente).

¿Por qué no sucede esto?

Nota: Estoy interesado en obtener respuestas de fuentes oficiales o confiables, idealmente identificando cualquier error o especificación que mencione el comportamiento y las posibles soluciones.

Información de depuración: Experimentando esto en el último Chrome, Ubuntu 17.10. Todavía no he probado el navegador cruzado, se actualizará como lo hago.

Answer 1

flex-shrink considerar la flex-shrink . Como puedes leer here :

La propiedad CSS de reducción flexible especifica el factor de reducción flexible de un elemento flexible. Los artículos flexibles se encogerán para llenar el contenedor de acuerdo con el número de encogimiento flexible, cuando el tamaño predeterminado de los artículos flexibles sea mayor que el contenedor flexible .

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>

Y como podemos leer aquí también :

La propiedad de contracción flexible especifica el factor de contracción flexible , que determina cuánto se encogerá el elemento flexible en relación con el resto de los elementos flexibles en el contenedor flexible cuando se distribuye el espacio libre negativo ⁽¹⁾ .

Esta propiedad se ocupa de situaciones en las que el navegador calcula los valores de base flexible de los elementos flexibles y descubre que son demasiado grandes para caber en el contenedor flexible . Mientras el encogimiento flexible tenga un valor positivo , los artículos se encogerán para que no se desborde el contenedor.

Entonces, al establecer flex-shrink en 0 el elemento nunca se encogerá, por lo que permite el desbordamiento (de forma predeterminada, el valor se establece en 1 ).

^{(1) Espacio libre negativo : tenemos espacio libre negativo cuando el tamaño natural de los artículos es mayor que el espacio disponible en el contenedor flexible.}