Ich habe einen Container mitdisplay: flex undflex-direction: row.

n diesem Container gibt es einen Subcontainer mitdisplay: flex aber mitflex-direction: column.

Das Problem ist, wenn ich eine Eingabe in den Untercontainer hinzufüge, diemin-width dieser Eingabe wird ignoriert.

Dies ist der Code, in dem ich mehrere Fälle von Eingaben in der Flexbox ausprobiert habe:

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

Wenn Sie den Bildschirm verkleinern, reagiert die 3. Zeile nicht wie die anderen.

In der CSS sehen Sie, dass die letzte Zeile als Kommentar gesetzt ist. Wenn dieser Teil aktiviert ist, müssen Sie nur neu laden und das Problem verschwindet. So perfekt ! Ich habe die Lösung!

Aber das stört mich, etwas zu benutzen, das ich nicht verstehe ^^.

Das wäre großartig, wenn mir jemand erklären könnte, warum dieser Fehler auftritt, warum diese Zeile ihn behebt und auch, wenn es einen besseren Weg gibt, dieses Problem zu vermeiden.