解决 textarea 与 div padding溢出的问题

解决 textarea 与 div padding溢出的问题

复现

<div className="container">
    <div className="head">
        北京时间2020年11月11日晚，
        宝马iNEXT量产版本原型车——宝马iX正式亮相。
        新车定位于中大型SUV，基于宝马全新纯电平台打造，
        WLTP续航超600km，
        其将于明年下半年在宝马丁格芬工厂开始生产，并于同年年底投放市场。
    </div>
    <textarea className="textarea" name="" id="" cols="30" rows="2"></textarea>
</div>

.container {
    width: 400px;
    padding: 15px;
    border: 1px solid #f00;
}
.textarea {
    width: 100%;
    box-sizing: content-box;
}

如图

然后在ios和Android系统查看对比即可

ios会出现滚动条，安卓不会

解决方法, 设置box-sizing: border-box

.textarea {
    width: 100%;
    box-sizing: border-box;
}