最大高度容器，内部有很高的固定位置容器

Question

Having some trouble with a very basic CSS problem.

I have a container that has a max-height of 655px. Now to the very right of that container is a fixed position container (it must be fixed position due to what I'm doing). The fixed position container has an absurdly large height.

It needs that height because it will be filled with content, that you'll ultimately see by clicking buttons and by some javascript. (changing the scrollTop)

I'm not 100% sure what I'm doing wrong, but I basically need only 655px of the fixed position container to show. I'm not really sure why this doesn't work the way I have it setup.

Check out the JS fiddle here: http://jsfiddle.net/BG2bu/

.tall {
background-color:blue;
position:absolute;
right:0px;
width:200px;
height:5000px;
}

I'm using this CSS to define the tall container. And I know if I change the position to absolute, it will constrain to the max height of it's parent container. I really need this container to be fixed though for other reasons. Is there any possible way to do this? Am I missing something simple here?

If this can be done with a JS/Jquery solution I'm definitely open to that.

Answer 1

Not sure this would be suitable for your needs but I've wrapped the .tall div with another container as position:fixed will not adhere to overflow:hidden in its container div.

http://jsfiddle.net/3DZ53/

Answer 2

Hard to tell if this suits your need or not, but could you...

.tall {
    max-height: 655px;
    overflow: scroll / hidden;
}