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

Posted by Jay Neely on Stack Overflow See other posts from Stack Overflow or by Jay Neely
Published on 2010-04-27T17:44:10Z Indexed on 2010/04/27 18:13 UTC
Read the original article Hit count: 304

Filed under:

max-height

|

css-layout

|

css

|

div-layouts

|

overflow

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.

The 1st div is intended to hold a variable amount of content, e.g. a list of links. It has no height set.
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?

© Stack Overflow or respective owner

Related posts about max-height

Javascript incapable of getting element's max-height via element.style.maxHeight

as seen on Stack Overflow - Search for 'Stack Overflow'
I am making a simple accordion menu in javascript. I'd like to be able to set the compact and expanded heights for the elements via the css max-height and min-height values. For some reason, when I try to retrieve the min-height and max-height of the elements in javascript for animation purposes,… >>> More
Positioning an image inside an ImageView width max height and max width set

as seen on Stack Overflow - Search for 'Stack Overflow'
I have an ImageView with max height and max width both set to 100. The figure below is clearly not a square, but you can use your imagination ;) Figure 1: +----------------------------------------------+ ¦ ImageView +--------------+ ¦ ¦ ¦ ¦ … >>> More
max-widgth and max-height solution in Internet Explorer

as seen on Stack Overflow - Search for 'Stack Overflow'
In this page: http://tinyurl.com/widthheight I am usign max-width and max-height. Work fine for Firefox, Chrome, Opera, Epiphany, ecc but NOT Internet Explorer. . What solution do you recommend in this case ? I have to limit max-width of 180px and max-height of 180px. >>> More
Positioning an image inside an ImageView with max height and max width set

as seen on Stack Overflow - Search for 'Stack Overflow'
I have an ImageView with max height and max width both set to 100. The figure below is clearly not a square, but you can use your imagination ;) Figure 1: +----------------------------------------------+ ¦ ImageView +--------------+ ¦ ¦ ¦ ¦ … >>> More
Using max-width = 100% and max-height = 100% on an image, calculate the display width/height

as seen on Stack Overflow - Search for 'Stack Overflow'
I am creating a slideshow for images of various sizes to display centered vertically and horizontally within a canvas area. In my CSS, I set the width and height of the image to 100% so that each image would proportionally fill the canvas. I want the canvas to auto-size itself to fit within the viewer's… >>> More

Related posts about css-layout

CSS layout that fills available space

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm trying to do a seemingly simple webpage layout, but I'm hitting a wall. I'd like to do everything purely with CSS (no tables to much things up, and no javascript dynamically resizing things) I'd like to have: A heading with a fixed height A footer with a fixed height Left sidebar with a… >>> More
CSS layout with 2 columns, taking up all width of browser, where left column can collapse

as seen on Stack Overflow - Search for 'Stack Overflow'
I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now… >>> More
Tricky CSS Layout

as seen on Stack Overflow - Search for 'Stack Overflow'
So I am making a website with quite a problematic layout. There are four corner images TL, TR, BL and BR indicated by black blocks. The dark orange area is the main content (to a width of 960px), with the outside area denoted by the green arrow as the browser window. See diagram: The top image… >>> More
Advanced CSS layout problem

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I want to create a dialog with a title, borders (left, right, bottom) as well as the content. The current source code: <html> <body> <div style="background: #0ff; width: 152px; height: 112px; position: absolute; top: 24px; left: 128px; display: table"> <div style="display:… >>> More
Relative width for a CSS layout, fixed and fluid mix

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello, I am trying to make a chatroom layout like the following: Now my problem is that I am not sure how to have the container box occupy the whole width and height (with valid doctype) and then make the center div grow if the window grows keeping the rest constant. i am well aware of js/css… >>> More