I set up a flexbox layout with four columns. Two columns have a fixed width, and two column should evenly fill the remaining space. The following codes works when I do not enter a select box in one of the flexible columns. If I add a select box the flexible columns are no longer distributed evenly. If i add a identical select box in both flexible columns the columns are distributed evenly. Can someone explain why this is and how to fix it?
<div>Simple example</div>
<div style="display: flex;width:100%;">
<div style="flex-grow:1;background-color:red;">Flexible column</div>
<div style="flex: 0 0 20px;background-color:blue;">-</div>
<div style="flex-grow:1;background-color:red;">Flexible column</div>
<div style="flex: 0 0 100px;background-color:blue;">Fixed column</div>
</div>
<br>
<div>Identical select boxes in flexible columns</div>
<div style="display: flex;width:100%;">
<div style="flex-grow:1;background-color:red;"><select><option>asdsad</option></select></div>
<div style="flex: 0 0 20px;background-color:blue;">-</div>
<div style="flex-grow:1;background-color:red;"><select><option>asdsad</option></select></div>
<div style="flex: 0 0 100px;;background-color:blue;">Fixed column</div>
</div>
<br>
<div>Different select boxes in flexible columns</div>
<div style="display: flex;width:100%;">
<div style="flex-grow:1;background-color:red;"><select><option>asdsad</option></select></div>
<div style="flex: 0 0 20px;background-color:blue;">-</div>
<div style="flex-grow:1;background-color:red;"><select><option>asdsadasdsadasd</option></select></div>
<div style="flex: 0 0 100px;;background-color:blue;">Fixed column</div>
</div>