流体宽度div内的流体宽度div带有填充物

Question

我有一点问题，我有2个div，都有％宽度。

<div class="wrapper">
  <h2 class="title"></h2>
</div>

.wrapper{
  width:50%;
}
.title{
 width:100%;
padding:5px
}

但是当我渲染时，h2宽度超过了包装器的宽度。

即使使用填充.title也不必尊重包装器的宽度？

Answer 1

这应该有效：

.wrapper { overflow: hidden; }

在这种情况下，.title仍然重叠，但它是隐藏的

或者：

.title { width: calc(100% - 10px); }

没有IE8支持。