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

Resuelto tao asked hace 6 años • 2 respuestas

Considerando el siguiente ejemplo...

Mostrar fragmento de código

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>

Expandir fragmento

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

¿Por qué no sucede esto?

Nota: Me interesan las respuestas extraídas de fuentes oficiales o confiables, idealmente señalando cualquier error o especificación que mencione el comportamiento y las posibles soluciones.

Información de depuración: experimentar esto en la última versión de Chrome, Ubuntu 17.10. Aún no lo he probado en varios navegadores, lo actualizaré como lo hago yo.

Mar 26 '18 20:03 tao

Aceptado

Necesitas considerar flex-shrink. Como puedes leer aquí :

La propiedad CSS flex-shrink especifica el factor de contracción flexible de un elemento flexible. Los elementos flexibles se reducirán para llenar el contenedor de acuerdo con el número de contracción flexible, cuando el tamaño predeterminado de los elementos flexibles sea mayor que el contenedor flexible .

Mostrar fragmento de código

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>

Expand snippet

Y como podemos leer aquí también :

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

Esta propiedad trata 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 . Siempre que flex-shrink tenga un valor positivo, los elementos se encogerán para no desbordar el contenedor.

Entonces, al configurar flex-shrinkel 0elemento nunca se reducirá, por lo que permite el desbordamiento (de forma predeterminada, el valor está establecido en 1).

^{(1) Espacio libre negativo : Tenemos espacio libre negativo cuando el tamaño natural de los elementos suma más que el espacio disponible en el contenedor flexible.}

Vale la pena señalar que la configuración min-width: 150%también dará el resultado esperado debido a otra característica de Flexbox que no permite que un elemento flexible se reduzca más allá de su ancho mínimo (ya sea definido explícitamente o intrínsecamente definido).

Mostrar fragmento de código

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>

Expand snippet

Relacionado: ¿ Por qué los elementos flexibles no superan el tamaño del contenido?

Mar 26 '2018 13:03 Temani Afif