Keep inner div from expanding beyond fixed height outer div

Question

I need my last div ("content"), whose height can vary, to expand to fill the container div but not expand beyond it. If the content div's contents won't fit, it should simply scroll with overflow-y: auto

However, I can't seem to contain the content div. I've tried a host of css without success and would appreciate some help.

UPDATE I see I left out one important piece of info. I do not want to specify a fixed height of the "content" div since the height of the container can vary (it is resizable). I would have to calculate and adjust the height of the content with each mousemove (which I am trying to avoid).

Here is a fiddle

#container {
  max-height: 350px;
  width: 200px;
  border: 2px solid black;
  display: block;
  position: absolute;
}
#title {
  height: 100px;
  width: 100%;
  border: 2px solid red;
}
#tabs {
  height: 100px;
  width: 100%;
  border: 2px solid green;
}
#content {
  height: 100%;
  width: 100%;
  border: 2px solid blue;
  overflow-y: auto;
}

<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

Sayed Rafeeq · Answer 1 · 2016-07-28T07:29:53.120

Explanation:

Added overflow: hidden; to #container and added overflow-y: auto; to #content attribute

Scroll-Demo

 #container {
     max-height: 350px;
     width: 200px;
     border: 2px solid black;
     display: block;
     position: relative;
     overflow: hidden;
 }
 #title {
     height: 100px;
     width: 100%;
     border: 2px solid red;
 }
 #tabs {
     height: 100px;
     width: 100%;
     border: 2px solid green;
 }
 #content {
     height: 100px;
     width: 100%;
     border: 2px solid blue;
     overflow-y: auto;
 }

<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
    </table>
  </div>
</div>

@mseifert: Glad to hear that! Good luck! :) – Sayed Rafeeq Jul 28 '16 at 07:58 — Sayed Rafeeq, Jul 28 '16 at 07:58

nicael · Answer 2 · 2016-07-28T08:01:31.787

3

height:100% is preventing that. Specify height, for example, in pixels.

Or use height: calc(100% - 208px);, to calculate the dynamic height. Don't forget to change max-height to height.

#container {
  height: 350px;
  width: 200px;
  border: 2px solid black;
  display: block;
  position: absolute;
}
#title {
  height: 100px;
  width: 100%;
  border: 2px solid red;
}
#tabs {
  height: 100px;
  width: 100%;
  border: 2px solid green;
}
#content {
  height: calc(100% - 208px);
  width: 100%;
  border: 2px solid blue;
  overflow-y: scroll;
}

<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
  </div

edited Jul 28 '16 at 08:01

answered Jul 28 '16 at 07:16

nicael

18,550
13
57
90

The height is variable. I should have mentioned that. – mseifert Jul 28 '16 at 07:16
Yes .if height is 100% you cant set the scroll.This is the correct method – Lakshmi Jul 28 '16 at 07:21
I tried calc(100% - 210px) but it had no effect. This might have been a possible solution, – mseifert Jul 28 '16 at 07:32
I see that you changed `max-height` to `height ` and this is why yours works and my jsfiddle didn't. Yes this might work. Thank you. – mseifert Jul 28 '16 at 07:44
I see a slight miscalculation. it should be `calc(100% - 208px)`. – Mr_Green Jul 28 '16 at 07:58
@mse Sorry, I've changed it indeed and forgot to mention. If my answer satisfies your needs, please don't forget to accept. – nicael Jul 28 '16 at 08:00
@Mr_Green Thanks :) – nicael Jul 28 '16 at 08:01
Unfortunately, I would have to hard code the amount to subtract from 100% in the css as it can't be done via js. So in the end, it's too inflexible a solution. I went with a flex box which is the better solution for my case. Thanks for your help. – mseifert Jul 28 '16 at 10:32

k2snowman69 · Accepted Answer · 2016-07-28T07:36:25.667

Here is a bit of a more fun way to do it. Removed your need for putting width 100% all over the place as well!

   

#container {
    max-height: 350px;
    width: 200px;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    position: absolute;
}

#title {
    flex: 0 0 100px;
    border: 2px solid red;
}

#tabs {
    flex: 0 0 100px;
    border: 2px solid green;
}
   
#content {
    flex: 1 1 auto;
    border: 2px solid blue;
    overflow-y: auto;
}

<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

If you want more info, this is just using the new flexbox layout (which was developed for exactly this situation! http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space?rq=1 — k2snowman69, Jul 28 '16 at 07:39
Flexbox had crossed my mind. It looks like the title and tab divs don't need to have flex definitions for this to work. Thank you, this may work. — mseifert, Jul 28 '16 at 07:48
Most browsers do a "smart fallback" if the developer didn't define a `flex` sizing attribute. Though most browsers do this, I'm not sure it's part of the spec other than to suffice the "min-content" scenario. Better safe than sorry, if the parent is `display: flex` I would specify `flex: 0 0 auto` or some variation just to be safe. — k2snowman69, Jul 28 '16 at 07:54

score 1 · Answer 4 · answered Jul 28 '16 at 07:46

You can do that using display: flex.

 #container {
   max-height: 350px;
   width: 200px;
   border: 2px solid black;
   position: absolute;
   display: flex;              /* Added */
   flex-direction: column;     /* Added */
 }

 #title {
   height: 100px;
   width: 100%;
   border: 2px solid red;
 }

 #tabs {
   height: 100px;
   width: 100%;
   border: 2px solid green;
 }

 #content {
   height: 100%;
   width: 100%;
   border: 2px solid blue;
   overflow-y: auto;
   flex: auto;              /* Added, this container should stretch in the remaining space */
 }

Working Fiddle

score 0 · Answer 5 · answered Jul 28 '16 at 07:22

You wanted only the last table to scroll, right?

   #container {
     max-height: 350px;
     width: 200px;
     border: 2px solid black;
     display: block;
     position: absolute;
     margin-bottom: 15px; /*just to see the bottom*/
   }
   
   #title {
     height: 100px;
     width: 100%;
     border: 2px solid red;
     box-sizing: border-box;
   }
   
   #tabs {
     height: 100px;
     width: 100%;
     border: 2px solid green;
     box-sizing: border-box;
   }
   
   #content {
     max-height: 138px;
     box-sizing: border-box;
     width: 100%;
     border: 2px solid blue;
     overflow-y: auto;
   }

<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

score 0 · Answer 6 · answered Jul 28 '16 at 07:23

HTML Code

   <div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

Css

     #container {
     max-height: 350px;
     width: 200px;
     border: 2px solid black;
     display: block;
     position: absolute;

   }

   #title {
     height: 100px;
     width: 100%;
     border: 2px solid red;
   }

   #tabs {
     height: 100px;
     width: 100%;
     border: 2px solid green;
   }

   #content {
     height: 100px;
     width: 100%;
     border: 2px solid blue;
     overflow-y: auto;
   }

fiddle link

Keep inner div from expanding beyond fixed height outer div

6 Answers6