html - 为什么我的描述 div 忽略了描述容器填充？

Question

我有一个包含 20 像素填充的描述包装器。然后我有一个包含很多内容的描述 div。

包装器容器使用 overflow: hidden 所以这个容器之外的任何内容都被隐藏了。但为什么我的描述 div 忽略了它的包装填充？

是因为我使用了 box-sizing: border-box 吗？

在这里查看我的 fiddle :http://jsfiddle.net/nZ38w/2/

更新:我可以设置描述框的高度，然后使用 overflow: hidden，但是没有其他方法吗？ ( http://jsfiddle.net/nZ38w/4/ )

更新 2: 似乎在 details-right-section 上设置新高度是唯一的解决方案:http://jsfiddle.net/nZ38w/5/

代码:

<div class="row">   
  <section class="column1"> 
      <!-- data here --> 
  </section>

  <section class="column2 details-right-section">
    <div class="description-container" >
      <h2>Description</h2>
        <div class="description">
          To much content here
        </div>
      </div>
  </section>
</div>

/* CSS */

/* Rest css */
body { font-size: 12px; margin: 0; padding: 0;}
h1, h2 { margin: 0; padding: 0; }
div, section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/* Main elements */
.row { width: 300px; height: 175px; }

.column2 {
    width: 300px;
    height: inherit;
    background-color: #cbdddc;
}

/* Description container */
.description-container {    
    height: inherit;
    overflow: hidden;
    border: solid 1px #ff8182;
    padding: 20px;
}

.description {
    line-height: 16px;
    line-height: 1.6rem;
    background-color: #e2e2e2;
}

Answer 1

你可以创建另一个 div class="description-overflow" 并且因为你知道确切的高度是 175px-40px 它会给你你想要的输出

http://jsfiddle.net/nZ38w/6/