先说说这个坑的来源
需求：input输入框跟一个点击按钮并排，点击按钮的宽度固定了，input的宽度就占满剩下的位置
一想到占满剩下的位置，就习惯性地想到了flex:1，然后就写了如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.formBox{
display:flex;
}
.input{
//width:0;//解决问题的关键就是这里
flex:1;
height:30px;
padding:5px;
outline:none;
border: 1px solid #ddd;
border-radius:6px;
}
.sumbitBtn{
width:140px;
height:42px;
text-align:center;
line-height:42px;
border-radius:6px;
margin-left:24px;
background:#23AAF2;
color:#fff;
}
</style>
</head>
<body>
<div class="formBox">
<input type="text" class="input">
<div class="sumbitBtn">提交</div>
</div>
</body>
</html>但是效果却是如下：
不对啊，我明明就写了width:140px了，怎么就变成99px了呢，
最后才查到input会有一个系统默认最小宽度，把按钮的宽度给挤到只剩下99px，
所以最终解决方案就是先给input随便加个宽度值覆盖系统默认的，再让flex:1生效即可，
我接下来的截图是给input的加上width:0的效果。
