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

Question

I have an external div with a variable height (and max-height) that sets with a certain number of pixels a JavaScript containing two divs inside.

• 1st div is designed to store a variable amount of content, for example. list of links. He has no height.
• The second div is designed to store a fixed amount of content and has a certain height.

The maximum height is currently not working. 1st div continues to grow, even with overflow: auto; set and pushes the second div below it beyond the outer div. How can I make it so that when the 1st div gets too big for the outer div to contain both it and the 2nd div with a fixed height, the first div starts to scroll?

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

Thanks for any help. I would appreciate a CSS solution, even if this would require some hacks. It should work only in Firefox 3+, IE8 and IE7.

Ideas?

Answer 1

You cannot do this without JS. Your maximum height on the outer div will not control the height of one of your inner divs to cause it to scroll. This inner div will always be the height you define (pixels, auto, etc.). You can either do the entire outer scroll of the div as needed using overflow: auto, or you can set the maximum height on the first inner div and set the overflow.

Answer 2

, ( , ):

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;

}

, , . ( ) .innerFixed .innerFlex .

Zen , , bottom top .innerFixed margin-top padding-top .innerFlex.

- , , ,

div.outer { float: left; }

... , ( ), ,

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

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

, margin-right , width ( ). , .