flex布局中search表单和text表单区别注意事项

在flex布局中，搜索框正常是这样的

 input {
            outline: none;
            width: 100%;
            border: 0;
            height: (66rem / @basefont);
            border-radius: (33rem / @basefont);
            margin-top: (12rem / @basefont);
            background-color: #fff2cc;
            font-size: (25rem / @basefont);
            padding-left: (55rem / @basefont);
            color: #757575;
        } 
<form action="">
                <input type="search" value="我要购物，我要买买买！">
            </form>

 但是如果用text文本框，就变成了这样

 <form action="">
                <input type="text" value="我要购物，我要买买买！">
            </form>

 原因就是search是html5新增加的表单，是border-box类型的盒子，而text表单是content-box类型，所以会在flex:1的基础上继续撑大盒子，解决方法可以为text表单添加box-sizing属性