防止子div溢出父div [英] Prevent child div from overflowing parent div

问题描述

我有一个包含标题部分和主体部分的父div.父div具有最大高度，但没有最小高度.

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

请参见以下示例: 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.

如示例所示，我已经尝试了overflow-y: auto，但是这并没有达到我的预期.

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

我希望滚动条仅出现在主体上，以便始终显示头部和父级底部填充.

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

推荐答案

您只需将容器设置为flexbox.

You could simply set the container to flexbox.

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

jsFiddle

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代替.

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

jsFiddle

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>

这篇关于防止子div溢出父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！