Eu tenho um container comdisplay: flex eflex-direction: row.

Nesse contêiner existe um sub-contêiner também comdisplay: flex mas comflex-direction: column.

O problema é que se eu adicionar uma entrada no sub-container, omin-width dessa entrada será ignorado.

Este é o código em que tentei vários casos de entrada no 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/

Se você reduzir o tamanho da tela, a terceira linha não reagirá como as outras.

No css, você verá que a última linha está definida como comentário. Quando essa parte está ativada, basta recarregar e o problema desaparece. Tão perfeito ! Eu tenho a solução!

Mas isso me incomoda usar algo que eu não entendo ^^.

Seria ótimo se alguém pudesse me explicar por que esse erro ocorre, por que essa linha o corrige e também se existe uma maneira melhor de evitar esse problema.