CSS 防止子div溢出父div

Prevent child div from overflowing parent div

提问by Right Of Zen

I have a parent div containing a header section and a body section. The parent div has a maximum height, but no minimum height.

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

See this example: https://jsfiddle.net/1o79a6nc/2/

看这个例子：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>

I want the body to only expand so that it fits inside the parent (including the padding), and then apply scroll bars when necessary.

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

As the example shows, I have tried overflow-y: auto, however this is not working as I have intended.

如示例所示，我已经尝试过overflow-y: auto，但是这并不像我预期的那样工作。

Edit: I want scroll bars to only appear on the body, so that the head section and the parent bottom padding are always visible.

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

回答by Stickers

You could simply set the container to flexbox.

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

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

jsFiddle

js小提琴

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

Another option would be using CSS table, some extra HTML code is needed. And max-heightdoesn't work with table layout, so use heightinstead.

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

jsFiddle

js小提琴

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

回答by kapigsaan

i updated your jsfiddle check it out

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