Html 如何将flexbox内的输入大小设置为可用空间？

我试图让输入占用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;
}

好啊
div
{
显示器：flex；
宽度：100px；
位置：相对位置；
边框：实心1px#000；
}
输入
{
弹性：1；
显示：块；
边界：无；
}

问题是输入溢出了包含的flexbox div。如果我将输入的宽度设置为100%，它似乎在Chrome中工作，但在FF中失败。如何做到这一点

---

这是因为输入的默认宽度大于

100px

。将

最小宽度：0

添加到输入中以修复此问题：

div
{
显示器：flex；
宽度：100px；
位置：相对位置；
边框：实心1px#000；
}
输入
{
弹性：1；
显示：块；
边界：无；
最小宽度：0；
}

好啊

你不需要把它做成一个灵活的盒子

您可以这样做：

<div>
<input></input>
</div>

<style>
div{
width: 100px;
}
input{
min-width:100%;
margin: 0px;
}
</style>

div{
宽度：100px；
}
输入{
最小宽度：100%；
边际：0px；
}

您可以给

div

一个

最大宽度

并用

宽度0激活flex打开
输入


div{
显示器：flex；
最大宽度：100px；
位置：相对位置；
边框：实心1px#000；
}
输入{
显示器：flex；
flex:1自动；
边界：无；
宽度：0；
}
钮扣{
显示器：flex；
flex:0自动；
}

好啊