防止子div溢出父div答案

【问题标题】：Prevent child div from overflowing parent div防止子div溢出父div
【发布时间】：2016-06-28 02:41:40
【问题描述】：

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

#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，但这并没有按我的预期工作。

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

【问题讨论】：

标签： css overflow

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我更新了你的 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;
}

【讨论】：

这大部分适用于本示例，但不适用于一般情况。例如，标题可能会占据可用高度的 50%。