¿Por qué la aplicación de uk-width-1-1 afecta a divs hijos de uk-grid pero no divs nesteds de hijos?

¿Por qué no se aplica el ancho del 100% en esta implementación (donde se aplica la clase uk-width-1-1 al div nested del elemento secundario del contenedor de la cuadrícula):

 
Row 01
Row 02

Sin embargo, se aplica cuando se implementa de esta manera (donde se aplica la clase uk-width-1-1 al elemento secundario del contenedor de la cuadrícula):

 
Row 01
Row 02

Puedo ver cómo lograr el efecto que quiero, pero me gustaría saber cuál es la lógica detrás para poder entenderlo mejor.

jsFiddle mostrando ambas implementaciones está aquí .

Editar:

Puedo replicar el comportamiento usando solo estilos flexibles, así que necesito descubrir por qué el div infantil puede ser 100% y los divs nesteds no pueden hacerlo.

  
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2

Tal vez un flex item , que es cualquier div secundario inmediato en un flex container , por defecto es el ancho de su contenido, por lo tanto, los divs nesteds, si se les da el width: 100% , representan fielmente el 100% del ancho del contenedor primario y no el superior contenedor de nivel donde display: flex se define display: flex ?

¿Por qué la aplicación de uk-width-1-1 afecta a divs hijos de uk-grid pero no divs nesteds de hijos?

Los niños de artículos flexibles no son parte de Flexbox. Solo los hijos de un contenedor flexible (un elemento con display: flex ) son (o como usted los llamó, hijos inmediatos ), por lo que su div interior más interno es un elemento de nivel de bloque normal y no responderá a la clase establecida uk-width-1-1 , su padre lo hará, como en su segunda muestra.

Cuando se trata de Flexbox, uno puede, simplificado, decir que el contenedor flexible se comporta de forma similar a un elemento de bloque y el elemento flexible como un bloque en línea.

Esto también se muestra en su primera muestra replicada, donde ni el elemento flexible ni el más interior tienen un ancho establecido, por lo que el contenido div más interno definirá el ancho del elemento flexible, del mismo modo que un nested div en un div sería, donde el div externo está configurado para display: inline-block .


Aquí hay algunos buenos recursos:


Actualizado

Tenga en cuenta que un artículo flexible también puede ser un contenedor flexible, como en la muestra siguiente

 
Item 1
Item 2