html - 在父级中包含子级 div，而不设置子级的高度

Question

这是我的查询的代码示例。

div.parent {
  background-color: #fff;
  border: 1px solid #AAA;
  width: 20em;
  height: 12em;
  overflow: hidden;
}
div.child {
  overflow: auto;
}

<div class="parent">
  <div class="buffer">
  </div>
  <div class="child">
    <span>Lorem ipsum dolor sit amet, quot dicam sit eu, dignissim complectitur ne per. Et per dico fabellas, cum oratio torquatos definitionem id. Ludus omnesque complectitur mea no. Quot corrumpit patrioque in eos, nec et aeterno vidisse numquam. Ad tollit verear eam. Errem maiorum nusquam te qui, ex recusabo abhorreant vim ipsum dolor sit amet, quot dicam sit eu, dignissim complectitur ne per. Et per dico fabellas, cum oratio torquatos definitionem id. Ludus omnesque complectitur mea no. Quot corrumpit patrioque in eos, nec et aeterno vidisse numquam. Ad tollit verear eam. Errem maiorum nusquam te qui, ex recusabo abhorreant vim ipsum dolor sit amet, quot dicam sit eu, dignissim complectitur ne per. Et per dico fabellas, cum oratio torquatos definitionem id. Ludus omnesque complectitur mea no. Quot corrumpit patrioque in eos, nec et aeterno vidisse numquam. Ad tollit verear eam. Errem maiorum nusquam te qui, ex recusabo abhorreant vim</span>
  </div>
</div>

描述

简要说明，父级已 overflow hidden ，子级应包含在父级中，但当它到达末尾时，子级应可滚动。 [编辑:我不希望让父级自动溢出，因为子级上方可能有一些内容最好在用户滚动时不隐藏]

到目前为止我看到了什么

大多数解决方案是预先设置 child 的高度，像这样(http://jsfiddle.net/ad9q216L/3/)，我也看到了一些使用 parent 的相对位置和 child 的绝对位置重新定位 child 的建议这个(http://jsfiddle.net/ad9q216L/4/)。

我的问题

我的问题是，是否有任何替代解决方案，我不必设置子项的高度或位置，但当父项仅使用 css overflow hidden 时使子项可滚动？

Answer 1

我认为 max-height: 100% 就可以了

div.parent {
  background-color: #fff;
  border: 1px solid #AAA;
  width: 20em;
  height: 12em;
  overflow: hidden;
}
div.child {
  overflow: auto;
  max-height: 100%;
}

<div class="parent">
  <div class="buffer">
  </div>
  <div class="child">
    <span>Lorem ipsum dolor sit amet, quot dicam sit eu, dignissim complectitur ne per. Et per dico fabellas, cum oratio torquatos definitionem id. Ludus omnesque complectitur mea no. Quot corrumpit patrioque in eos, nec et aeterno vidisse numquam. Ad tollit verear eam. Errem maiorum nusquam te qui, ex recusabo abhorreant vim ipsum dolor sit amet, quot dicam sit eu, dignissim complectitur ne per. Et per dico fabellas, cum oratio torquatos definitionem id. Ludus omnesque complectitur mea no. Quot corrumpit patrioque in eos, nec et aeterno vidisse numquam. Ad tollit verear eam. Errem maiorum nusquam te qui, ex recusabo abhorreant vim ipsum dolor sit amet, quot dicam sit eu, dignissim complectitur ne per. Et per dico fabellas, cum oratio torquatos definitionem id. Ludus omnesque complectitur mea no. Quot corrumpit patrioque in eos, nec et aeterno vidisse numquam. Ad tollit verear eam. Errem maiorum nusquam te qui, ex recusabo abhorreant vim</span>
  </div>
</div>