更改<input type = text>字体大小而不更改其宽度

Question

我有两个文本框，其宽度比例应该为2：1，我可以使用flex做到这一点。但是，当我将字体大小更改为300％时，文本框的宽度将相等。
如何避免这种情况并使宽度保持2：1的比例？

这是代码：

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>

另外，我不想为任何文本框设置固定宽度。

Answer 1

这是火狐浏览器的问题。

最好的解决方案是为输入添加最小宽度。

input{ min-width:0;}

或者

将各个输入包装在 div 中并弯曲它们，并将输入设置为 100% 宽。

Answer 2

这似乎是 Firefox 的问题，因为 Chrome 和 IE11 没有任何问题。（无法像在 Windows 上那样在 Safari 上进行测试）。

一种解决方案是将各个输入包装在 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>