Css - scrollable child of a fixed element

Question

I have a fixed div with 100% height, in which case a child div that is relatively positioned. The child-div contains text that can be changed, so it does not have a fixed height.

I want the child-div to scroll vertically if its contents overflow from the screen. I played with minimum and maximum height properties to achieve this, but this is not an ideal solution and does not always work.

EDIT: minimum and maximum heights were almost ignored. I calculated how many vertical areas of the textBox will occupy the minimum allowable height of the screen and set it as the height. The addition of a minimum and maximum height had nothing to do with this. The only problem with this solution is that the field is always around ~ 60%, so even if it does not need to be scrolled, it does. It works, but not perfect. If there is a way around this, it would be great.

This is what I still have:

<div class="content">
    <div id="textbox"> some text
    </div>
</div>

.content { position: fixed; height: 100%; top: 0px; right: 0px; }

#textBox { 
    position: relative;
    top: 165px;
    height: 61.5%;
    overflow-y: auto;
}

Is there a better, safer way to do this?

Answer 1

The following worked fine for me:

<style type="text/css">
    #fixed {
        position:   fixed;
        top:        0;
        bottom:     0;
        left:       0;
        right:      0;
        border:     1px solid black;
        overflow:   hidden;
        background: white;
    }

    #scrolling {
        overflow: auto;
        max-height: 98%;
    }
</style>

<div id="fixed">
    <div contenteditable id="scrolling">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
        egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
        ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
        fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non
        enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas
        augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
        facilisis luctus, metus</p>
    </div>
</div>

The content of the div is editable, so just add text before scrolling. This will work on a decent browser.

Live example

Answer 2

, , , jsfiddle, .