Change <input type=text> font-size without changing its width

Question

I have two text-boxes whose ratio of width is supposed to be 2:1, I can do that using flex. But when I change the font-size to 300% the width of the text boxes becomes equal.
How do I avoid that and keep the width in the ratio 2:1?

Here's the Code:

input[type=text] {
  font-size: 300%;
}
#b4 {
  flex: 2;
}
#b2 {
  flex: 1;
}
div {
  display: flex;
  width: 100%;
}

<div>
  <input type="text" id="b4"></input>
  <input type="text" id="b2"></input>
</div>

Also, I don't want to set fixed width to any text-box.

Answer 1

This is a Firefox issue.

The best solution is adding a min-width for the input.

input{ min-width:0;}

OR

wrap the individual inputs in divs and flex those and set the inputs to be 100% wide.