防止子div溢出父div

Question

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

请参阅此示例：https://jsfiddle.net/1o79a6nc/2/

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我希望主体只展开以便它适合父级（包括填充），然后在必要时应用滚动条。

如示例所示，我尝试了overflow-y: auto，但这并不像我预期的那样有效。

编辑：我希望滚动条仅显示在正文上，以便头部和父底部填充始终可见。

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>

Answer 2

我更新了你的jsfiddle检查出来

jsfiddle

#cont {
  padding: 5px;
  background-color: red;
  max-height: 150px;
  max-width: 50%;
  overflow-y: scroll;
}
#body {
  background-color: blue;

}
#head {
  background-color: green;
}

Answer 3

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

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

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