解决方法很简单， 就是使用 flex-shrink 属性；
flex-shrink 属性定义了项目的缩小比例，默认为1
即如果空间不足，该项目将缩小，它还有另外一个值，就是0
如果在子元素的 css 样式中添加 flex-shrink 属性， 然后把值改为 0
flex-shrink：0 ，那么当前元素就不会被其他子元素挤压
<style>
.box-wrapper {
width: 300px;
background-color: grey;
display: flex;
justify-content: space-between;
}
.input-cls {
width: 100%;
}
.text-cls {
/* flex-shrink: 0; */
}
</style>
<body>
<div class="box-wrapper">
<input type="text" class="input-cls">
<div class="text-cls">重新发送验证码</div>
</div>
</body>
因为input元素设置了width: 100% 所以这个元素尽可能撑大，挤压到后面元素了
解决方法: 给元素设置 flex-shrink：0 即可
