Html 防止儿童'；s从溢出的父级填充/边框

问题演示

我希望子对象（包括填充和边框）完全包含在父对象中

我想要一个解决方案，允许我指定孩子的宽度为100%，如在演示

截图

HTML

---

使用

框大小：边框框

。包括Firefox的

-moz-

前缀，该前缀仍然需要：

.child {
  padding: 10px; 
  width:100%;
  border:30px solid #f2f2f2;
  text-align:right;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

---

使用

框大小：边框框

。包括Firefox的

-moz-

前缀，该前缀仍然需要：

.child {
  padding: 10px; 
  width:100%;
  border:30px solid #f2f2f2;
  text-align:right;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

.child {
  padding: 10px; 
  width:100%;
  border:30px solid #f2f2f2;
  text-align:right;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}