Using CSS max-height on an outer div to force scroll on an inner-div.

Question

I have an outer div with a variable height (and max-height) that's set with a specific pixel amount by JavaScript, containing two divs within.

1. The 1st div is intended to hold a variable amount of content, e.g. a list of links. It has no height set.
2. The 2nd div is intended to hold a fixed amount of content, and has a specific height set.

Right now, the max-height isn't working. The 1st div keeps growing, even with overflow: auto; set, and pushes the 2nd div below it outside the bounds of the outer div. How can I make it so that when the 1st div gets too large for the outer div to contain both it and the fixed-height 2nd div, the 1st div will start to scroll?

Example page: http://thevastdesign.com/scrollTest.html

Thanks for any help. I'd appreciate a CSS solution the most, even if it requires some hacks. It only has to work in Firefox 3+, IE8, and IE7.

Ideas?

Answer 1

You cant really do that without JS. Your max-height on the outer-div isnt going to control the height of one of your inner divs to invoke its scrolling. That inner div is always going to be the height you set (pixels, auto, etc..). You can either make the entire outer div scroll as needed by using overflow: auto or you can set a max height on the first inner div and set the overflow.

Answer 2

Given your setup, I would do the following (class names are implied by your question, not taken from the linked source):

div.outer {
  position: relative;
  max-height: $length(y);
  overflow: hidden;
}

div.innerFixed {
  position: absolute;
  bottom: 0;
  height: $length(y);
  overflow: hidden;        /* just in case, to keep things from
                              blowing out into all manner of crazy */
}

div.innerFlex {
  max-height: $length(y);
  overflow: auto;

}

These rules don't address box properties, which will have an impact on the height values that you apply. The combined height values (with box values included) of .innerFixed and .innerFlex should equal the height value of the container.

If you want to get all Zen and flip the vertical composition, you do that by swapping bottom for top on .innerFixed and assigning margin-top or padding-top to .innerFlex.

Something else I noticed is that you've got

div.outer { float: left; }

...But given what you need from that element (and to set the right content priority) I would instead suggest that you put your big column first in the source order and apply

div.mainContent {
  float: right;
  width: $length(x);
}

div.outer { /* i.e., the column that started the discussion */
  margin-right: length(x);
}

with the understanding that the margin-right of the latter is somewhat greater than the width of the former (greater to account for the gutter between the two elements). Try it, you'll like it.