解决方法很简单， 就是使用 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 即可
