如何使flexbox尺寸内的输入变为可用空间？

Question

我试图获取输入以占用此Flexbox内的所有可用空间，但不超出Flexbox的宽度。

<div>
   <input type="number"/>
   <button>OK</button>
</div>

div
{
  display:flex;
  width:100px;
  position:relative;
  border:solid 1px #000;
}

input
{
  flex:1;
  display:block;
  border:none;
}

问题是输入溢出了包含的flexbox div。如果我将输入的宽度设置为100％，则似乎可以在Chrome浏览器中运行，但不能在FF中运行。应该怎么做？

https://jsfiddle.net/y7d7Ldur/

Answer 1

这是因为输入的默认宽度大于100px。添加min-width:0到输入以解决此问题：

div
{
  display:flex;
  width:100px;
  position:relative;
  border:solid 1px #000;
}

input
{
  flex:1;
  display:block;
  border:none;
  min-width:0;
} 

<div>
   <input type="number">
   <button>OK</button>
</div>