复杂嵌套Div的CSS溢出滚动问题

Question

我有一个浮动div（弹出窗口），其中包含div标题，滚动内容部分和页脚。这是一个简化：

html,
body,
.outer {
  height: 200px;
  background: pink;
  border: 1px
}
.inner {
  display: inline-block;
  height: 100%;
  width: 100%;
  background: lime;
  border: 1px;
  overflow: hidden
}
.tabs {
  height: 50px;
  background: blue;
}
.header {
  height: 50px;
  background: yellow;
}
.main {
  height: auto;
  overflow: scroll;
  background: orange;
}
.footer {
  background: red;
  position: absolute;
  padding: 1em;
  bottom: 0;
  width: 100%;
}

<div class="outer">
  <div class="inner">
    <div class="tabs">
      Tabs
    </div>
    <div class="header">
      Header Info
    </div>
    <div class="main">
      .. line1 ..
      <br/>.. line2 ..
      <br/>.. line3 ..
      <br/>.. line4 ..
      <br/>.. line5 ..
      <br/>.. line6 ..
      <br/>.. line7 ..
      <br/>.. line8 ..
      <br/>.. line9 ..
      <br/>.. line10 ..
      <br/>.. line11 ..
      <br/>.. line12 ..
      <br/>
    </div>
    <div class="footer">
      Footer Info
    </div>
  </div>
</div>

这是JSFiddle：JSFiddle Example

问题是主分区中的内容被裁剪而不是滚动。

Answer 1

在.main上指定高度，而不是.outer。

http://jsfiddle.net/fknc5p27/1/

https://jsfiddle.net/gptuk4uz/6/

＆＃13;

＆＃13;

html,
body,
.outer {
  /*height: 200px;*/
  background: pink;
  border: 1px
}
.inner {
  display: inline-block;
  height: 100%;
  width: 100%;
  background: lime;
  border: 1px;
  overflow: hidden
}
.tabs {
  height: 50px;
  background: blue;
}
.header {
  height: 50px;
  background: yellow;
}
.main {
  height: 150px;
  overflow: auto;
  background: orange;
}
.footer {
  background: red;
  position: absolute;
  padding: 1em;
  bottom: 0;
  width: 100%;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <div class="tabs">
      Tabs
    </div>
    <div class="header">
      Header Info
    </div>
    <div class="main">
      .. line1 ..
      <br/>.. line2 ..
      <br/>.. line3 ..
      <br/>.. line4 ..
      <br/>.. line5 ..
      <br/>.. line6 ..
      <br/>.. line7 ..
      <br/>.. line8 ..
      <br/>.. line9 ..
      <br/>.. line10 ..
      <br/>.. line11 ..
      <br/>.. line12 ..
      <br/>
    </div>
    <div class="footer">
      Footer Info
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;