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

1.问题描述

当父元素容器中剩余空间太小的情况下input设置的flex:1会失效

<div style="width: 200px;display: felx;border:1px solid green;">
  <input style="flex: 1;border:1px solid red"><!-- 此时flex: 1就会失效 -->
  <span>获取验证码</span>
</div>

2.问题产生的原因

input默认是有宽度，其宽度是受size属性的影响。MDN中对其定义如下：

size-控件的初始大小。以像素为单位。但当type 属性为text 或 password时, 它表示输入的字符的长度。从HTML5开始, 此属性仅适用于当 type 属性为 text, search, tel, url, email,或 password；否则会被忽略。 此外，它的值必须大于0。 如果未指定大小，则使用默认值20。 HTML5 概述 "用户代理应该确保至少大部分字符是可见的", 但是不同的字符的用不同的字体表示可能会导致宽度不同。在某些浏览器中，一串带有x的字符即使定义了到x的大小也将显示不完整。

所以，input 默认是有20个字符的宽度的，那也就是代表着，除了 size 以外，font-size 也决定了 input 的宽度。那我们可以把 input 看成是默认装了20个字符的行内块元素。
当input设置flex:1其占用的宽度小于input的默认宽度时，input设置flex:1就会失去作用。

注：当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。

3.解决办法

1. 给 input 加上 size 属性为一个比较小的值

  <input type="text" placeholder="请输入验证码" size="1">

2. 可以给input的min-width设置一个比较小的值

.wrap input{
  flex: 1;
  min-width: 0;
}

参考资料：
flex-basis - CSS（层叠样式表） | MDN