width为 100% 的问题

<div class="box">
    <div></div>
</div>

.box {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, .2);
}
.box>div {
    width: 100%;
    height: 60px;
    background: pink;
}

在上面的例子中，一旦给内部 div 设置了 width: 100% 会出现如下问题

1. 内部 div 元素（content）宽度 = 父元素的宽度(200px)
2. 内部 div 设置 padding-left 为 20px时，内部 div 盒模型 20px(内边距) + 200px (元素宽度) = 220px，会撑破父元素

---

解决方法

不要给块级元素设置宽度为 100% 因为块级元素默认宽度为父元素的宽度
或者

    width: -webkit-fill-available;