Experimento | Flexbox: Posicione elementos en la pantalla | Alura Latam

Jugando con estos datos, veo que si el flex-shrink es mayor en un elemento que en otro, disminuirá su tamaño más rapidamente; PERO, si hay texto dentro del elemento, funcionará como una especie de tope a su decrecimiento. Si quito el texto, puedo disminuir la ventana hasta "desaparecer" dicho elemento.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-shrink--grow_test</title>
    <link rel="stylesheet" href="css/flexGrowShrink.css">
</head>
<body>
    <main class="container">
    <div class="flexContainer">        
        <div class="flexItem firstRow"></div>
        <div class="flexItem firstRow"></div>
        <div class="flexItem firstRow"></div>
        <div class="flexItem firstRow">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, adipisci!</div>
      </div>
    </main>

</body>
</html>

html, body {
    height: 100vh;
    width: 100vw;
    background-color: purple;
    display: flex;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10%;
    width: 80%;
}

.container:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10%;
    width: 80vw;
}

.flexContainer {
    display: flex;
    width: 100vw;
    height: 35vh;
    background-color: purple;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
  }

  .flexItem {
    width: 200px;
    height: 200px;
    background-color: lightseagreen;
    border: 4px solid white;
    display: flex;  
  }

  .flexItem:first-child {
    flex-shrink: 2;
    background-color: lightpink;
  }

  .flexItem:nth-child(4) {
    flex-basis: 250px;
    flex-grow: 1;
    flex-shrink: 3;
    background-color: darkorchid;
    font-family: monospace;
    font-size: 2rem;
  }

  .flexItem:hover {
    background-color: red;
  }

  .flexItem:active {
    background-color: bisque;
  }