input 设置flex:1 失效，某些浏览器失效

问题：设置label和value展示如下，使用flex布局后某些浏览器input具有默认宽度导致value部分超出

 

 

原因：input兼容弹性盒子有问题，它会有一个自己默认的最小长度，所以会导致“个人”部分内容超出屏幕范围

解决办法：可以给input输入框加一个div父元素，然后这个div设置flex:1,input设置width:100%；

 代码如下：

1、组件代码，简化版

const Input = React.memo(() => {
   return (
      <div className="form-row" >
         <div className="label">
            <span className="ml12">主体登记信息/认证主体</span>
         </div>
         <div className="content">
            <input value={'个人'}/>
         </div>
      </div>
   )
})

2、less代码，简化

.form-row {
   position: relative;
   display: flex;
   flex-wrap: nowrap;
   border: none;

   .label {
      flex: none;
   }

   .content {
      flex: 1;
      border: none;
      text-align: right;

      .input {
         text-align: right;
         border: none;
         line-height: 28px;
         width: 100%;
      }
   }
}