如何通过封装div使工作溢出自动

Question

我使用ExtJS 2.3生成以下结构，但我认为并不重要。我想注意overflow: auto自动添加到div.body的内容。为什么div.body与overflow: auto不符合父母身高？如何启用它？我想启用div.body滚动。请帮忙。

div.first {
    width: 200px;
    height: 200px;
    border: #f00 solid 1px;
    overflow: hidden;
}
div > div.body {
    overflow: auto;
    border: #0f0 solid 1px;
}
div > div.body > div {
    overflow: hidden;
    border: #00f solid 1px;
}
div > div.body > div > div {
    overflow: hidden;
    border: #ff0 solid 1px;
    line-height: 1.5em;
}

<div class="first">
  <div class="header">Some header</div>
  <div class="body">
    <div>
      <div>
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test
      </div>
    </div>    
  </div>    
</div>

Answer 1

试试这个。 让我用我熟悉的英语来解释这一点。 这里第一个div宽度是固定的。但剩下的是自动的，所以浏览器会计算它。

首先设置为200px; 身体试图适应它并且它的孩子适合但是孩子的高度穿过身体div的高度。所以给身体div添加一些高度。这样孩子就会被计算出来

div.first {
    width: 200px;
    height: 200px;
    border: #f00 solid 1px;
    overflow: hidden;
}
div > div.body {
    overflow: auto;
    border: #0f0 solid 1px;
  height: 90%;
}
div > div.body > div {
    overflow: hidden;
    border: #00f solid 1px;
}
div > div.body > div > div {
    overflow: hidden;
    border: #ff0 solid 1px;
    line-height: 1.5em;
}

<div class="first">
  <div class="header">Some header</div>
  <div class="body">
    <div>
      <div>
        test1<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test<br />
        test11
      </div>
    </div>    
  </div>    
</div>

Answer 2

从div.first移除身高并添加到div > div.body。

＆＃13;

＆＃13;

div.first {
width: 200px;
border: #f00 solid 1px;
overflow: hidden;
}
div > div.body {
height: 200px;
overflow: auto;
border: #0f0 solid 1px;
}
div > div.body > div {
overflow: hidden;
border: #00f solid 1px;
}
div > div.body > div > div {
overflow: hidden;
border: #ff0 solid 1px;
line-height: 1.5em;
}

＆＃13;

<div class="first">
  <div class="header">Some header</div>
  <div class="body">
<div>
  <div>
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test
  </div>
</div>    
  </div>    
</div>

＆＃13;

＆＃13;

＆＃13;