Flexbox in Tabelle mit Input Elementen

[Forumsgast]

Guten Abend allerseits,

ich hab mal wieder (ein kleineres) Problemchen mit CSS: Ich habe eine Tabelle mit Inputfeldern, auf die ich das Flexbox-Modell anwenden möchte.
Die Inputfelder passen sich wie gewünscht in der Breite der Fensterbreite an, jedoch wenn ich meine Fensterbreite bis auf einen bestimmten Punkt herunterfahre,
dann folgen die TH Beschriftungen nicht mehr dem Inhalt der Zellen und ich weiss nicht worans liegt.

Für einen Tip bin ich dankbar,

LG

<style>
th {
  text-align: left;
}

table {
  width: 100%;
  background: red;
}

tr {
  display: flex;
  flex: 1;
}

th, td {
  display: flex;
  flex: 1;
}

input, select {
  flex: 1;
 }


</style>

<table>
<tbody>
<tr><th>Name</th><th>Vorname</th><th>Ort</th><th>Transport</th></tr>
<tr><td><input value="Schmidt"></td><td><input value="Karl"></td><td><input value="Bonn"></td><td><select name="delivery"><option value="Schiff">Schiff</option></select></td></tr>
<tr><td><input value="VonderLeyen"></td><td><input value="Ursula"></td><td><input value="Berlin"></td><td><select name="delivery"><option value="Bahn">Bahn</option></select></td></tr>
</tbody>
</table>

[Forumsgast]

Habs grade selbst rausgefunden mit Hilfe dieses Artikels => https://stackoverflow.com/questions/...n-display-flex



Für meine Problem brauche ich somit nur den Input Feldern sowie dem Select Feld eine gleiche Start-Weite geben, dann wachsen und verkleinern sich
alle Tabellen-Zellen und die Header bleiben diesmal bündig :

input, select {
  width: 1em;
}