Right Of Zen Right Of Zen - 5 months ago 35
CSS Question

Prevent child div from overflowing parent 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.

See this example: 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.

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

Answer

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

#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-height doesn't work with table layout, so use height instead.

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>

Comments