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

Question

I have two text fields whose width ratio should be 2: 1, I can do this with flex. But when I change the font size to 300%, the width of the text fields becomes equal.
How to avoid this and keep the width in the ratio 2: 1?

Here is 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>

Run code

In addition, I do not want to set a fixed width in any text box.

Answer 1

This seems to be a problem with Firefox, since Chrome and IE11 have no problems. (Unable to check Safari, as in Windows).

, div 100% .

FF 40 , , .

- Codepen

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type=text] {
  display: block;
  width: 100%;
  border: 1px solid green;
}
.double {
  flex: 2;
}
.single {
  flex: 1;
}
.wrap {
  display: flex;
  margin-bottom: 1em;
}
.large input[type=text] {
  font-size: 300%;
}

<div class="wrap">

  <div class="double">
    <input type="text" class="b4"></input>
  </div>
  <div class="single">
    <input type="text" class="b2"></input>
  </div>
</div>

<div class="wrap large">

  <div class="double">
    <input type="text" class="b4"></input>
  </div>
  <div class="single">
    <input type="text" class="b2"></input>
  </div>
</div>

Answer 2

Firefox.

.

input{ min-width:0;}

div 100%.

Answer 3

You can set a fixed height and width in the text box and set the font size of your choice.

Example:

width: 180px;
font-size: 24px;
height: 25px;`