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

我有一个包装为我的描述，其中有20px的填充。然后我有一个内容非常丰富的描述div

包装容器使用

溢出：隐藏

，因此此容器之外的任何内容都将隐藏。但为什么我的description div忽略了它的包装填充

是否因为我使用了

框大小：边框框

请看我的小提琴：

更新：我可以设置描述框的高度，然后使用overflow:hidden，但是没有其他方法吗？（）

更新2：似乎在

详细信息右侧部分设置新高度是唯一的解决方案：

代码：


描述
这里有很多内容
/*CSS*/
/*RESTCSS*/
正文{字体大小：12px；边距：0；填充：0；}
h1，h2{边距：0；填充：0；}
div，节{-webkit框大小：边框框；-moz框大小：边框框；框大小：边框框；}
/*主要元素*/
.行{宽度：300px；高度：175px；}
.专栏2{
宽度：300px；
身高：继承；
背景色：#CBDDC；
}
/*描述容器*/
.description容器{
身高：继承；
溢出：隐藏；
边框：实心1px#ff8182；
填充：20px；
}
.说明{
线高：16px；
线高：1.6雷姆；
背景色：#E2；
}
尝试删除
高度：inherit从
.column2
，或删除
高度：175px从
.row
（或将
高度更改为
最小高度
）。
您可以创建另一个div
class=“description overflow”
，因为您知道确切的高度将是
175px-40px
，它将为您提供所需的输出

使用溢出时：隐藏；它只隐藏div外部的内容。填充在内部，因此不包括该内容。您可以手动更改“description”div的高度。设置不同高度的唯一方法是什么？看小提琴：我不能去掉这一排的高度。我试过很多不起作用的东西。你可以用小提琴来测试你的建议。实际上，在你的第一把小提琴jsfiddle.net/nZ38w/2/中，它确实有效。它是否有效并不重要。在我的完整解决方案中，row div包含许多其他元素，其设计高度为175px。所以我“无法”删除它。因为似乎没有其他选择，所以我选择这个解决方案（没有额外的div；）
<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;
}