¡CURIOSIDAD de Flexbox!

¿Sabías que la propiedad << flex-basis >> se comporta de diferente forma con el valor "0" que con el valor "0%"? Recordemos que la propiedad longhand << flex-basis >> determina el TAMAÑO INICIAL en el main axis, para un flex item; con el fin de que el navegador realice los cálculos necesarios para establecer el crecimiento/encogimiento de los flex items, dentro de su contenedor. Para entender tal diferencia entre el valor "0" SIN unidades y con el signo de PORCENTAJE, deben cumplirse cada una de las siguientes tres CONDICIONES: 1. El flex container NO debe tener un TAMAÑO DEFINIDO. 2. Al flex item se le impone una restricción con la propiedad << min-width >> / << min-height >>; de acuerdo con la dirección del main axis. 3. El MISMO flex item debe poseer un CONTENIDO que lo obligue a crecer MÁS ALLÁ de la anterior RESTRICCIÓN. A continuación, te comparto tanto MI código fuente cómo una captura de pantalla del navegador, para que notes la DIFERENCIA entre la interpretación del MISMO valor "0", pero con diferentes UNIDADES. Ahora, con el fin de visualizar mejor el efecto, cada flex container se establece cómo un elemento inline, escribiendo la declaración: << display: inline-flex; >>. Además, se cambia la orientación del main axis a vertical, con la declaración: << flex-direction: column; >>. Para el primer (a la izquierda) flex item, la propiedad << flex-basis >> tiene el valor de "0". Por lo que el navegador muestra su CONTENIDO hasta el límite impuesto a 200px; más allá de ésta ALTURA, es necesario utilizar una barra de SCROLL vertical para visualizar el RESTO de su contenido. Por otro lado, para el segundo (a la derecha) flex item, el valor de la propiedad << flex-basis >> es "0%". Así, en este caso en PARTICULAR, el navegador interpreta a TODO el contenido dentro del flex item cómo su TAMAÑO INICIAL; el hecho anterior sucede de esta forma por que su flex container NO tiene un tamaño DEFINIDO y por lo tanto, NO hay punto de REFERENCIA para el PORCENTAJE. Lo que a su vez, puede ROMPER con la restricción impuesta al tamaño del flex item. Si deseas profundizar sobre éste inusual comportamiento de Flexbox, te comparto la información referente en "MDN Web Docs", cómo un buen punto de partida: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#flex_basis_0_vs_0