在flex布局下input设置flex:1失效的原因

由于input默认存在最小宽度，所以在父元素宽度太小的情况下input设置了flex:1会失效

<div style="width: 100px;display: felx;">
<input style="flex: 1;"><!-- 此时flex: 1就会失效 -->
<button style="flex: 0 0 25px"></button>
</div>

解决办法：
外面加上一层元素包裹input，然后设置外层元素的flex: 1，input设置width: 100%即可

<div style="width: 100px;display: felx;">
<div style="flex: 1;">
<input style="width: 100%"><!-- 此时input就可以自动获取到剩余的宽度 -->
</div>
<button style="flex: 0 0 25px"></button>
</div>