representación mínima de ancho de manera diferente en dirección flexible: fila y dirección flexible: columna

Tengo un contenedor condisplay: flex yflex-direction: row.

En ese contenedor hay un subcontenedor también condisplay: flex pero conflex-direction: column.

El problema es que si agrego una entrada en el subcontenedor, elmin-width de esa entrada será ignorada.

Este es el código donde probé varios casos de entrada en flexbox:

form {
  margin: 100px;
}
div.flex_ctn {
  display: flex;
}
input {
  flex: 1;
  min-width: 40px;
}
div.column {
  flex-direction: column;
}
div.row {
  flex-direction: row;
}
div.sub_ctn {
  flex: 1;
  /*min-width:40px;*/
}

<form>
  <div class="flex_ctn row">
    <input />
  </div>
  <div class="flex_ctn column">
    <input />
  </div>
  <div class="flex_ctn row">
    <div class="flex_ctn column sub_ctn">
      <input />
    </div>
  </div>
  <div class="flex_ctn column">
    <div class="flex_ctn row sub_ctn">
      <input />
    </div>
  </div>
</form>

https://fiddle.jshell.net/s3gu32ku/2/

Si reduce el tamaño de la pantalla, la tercera línea no reacciona como las demás.

En el CSS verás que la última línea está configurada como comentario. Cuando esa parte está habilitada, solo tiene que volver a cargarla y el problema desaparece. Tan perfecto ! ¡Tengo la solución!

Pero eso me molesta usar algo que no entiendo ^^.

Esto sería genial si alguien me puede explicar por qué ocurre ese error, por qué esa línea lo soluciona y también si hay una mejor manera de evitar ese problema.