防止子div溢出父div

Question

我有一个包含标题部分和正文部分的父 div。父 div 有最大高度，但没有最小高度。

看这个例子： https ://jsfiddle.net/1o79a6nc/2/

 #cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
}
#head {
  background-color: green;
}

 <div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
  </div>
</div>

我希望主体仅扩展以使其适合父级（包括填充），然后在必要时应用滚动条。

如示例所示，我尝试过 overflow-y: auto ，但这并没有按我的预期工作。

编辑：我希望滚动条只出现在身体上，以便头部和父底部填充始终可见。

原文由 Right Of Zen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以简单地将容器设置为 flexbox。

 #cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}

jsFiddle

 #cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  display: flex; /*added*/
  flex-direction: column; /*added*/
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1; /* added */
}
#head {
  background-color: green;
}

 <div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
    <div>Body</div>
  </div>
</div>

另一种选择是使用 CSS 表格，需要一些额外的 HTML 代码。并且 max-height 不适用于表格布局，因此请改用 height 。

jsFiddle

 #cont {
  padding: 5px;
  background-color: red;
  height: 150px;
  width: 50%;
  display: table;
}
#head,
#body {
  display: table-row;
}
#head > div,
#body > div {
  display: table-cell;
  position: relative;
}
#body > div {
  height: 100%;
}
#body > div > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#body {
  background-color: blue;
  overflow-y: auto;
  overflow-x: hidden;
}
#head {
  background-color: green;
}

 <div id='cont'>
  <div id='head'>
    <div>Head</div>
  </div>
  <div id='body'>
    <div>
      <div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
        <div>Body</div>
      </div>
    </div>
  </div>
</div>

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个解决方案对我有用，它只在子 div 中显示垂直滚动条。

 .parent
{
    height : 300px ; //for example
    overflow: hidden;
}

.child
{
    max-height: 100%;
    overflow-y: scroll;
}

原文由 Maherbs 发布，翻译遵循 CC BY-SA 4.0 许可协议