CODEWITHSUNDEEP
css
Ian Telke
Ian Telke

Reputation: 41

max-height, overflow:scroll and position

I have an element that needs the ability to grow and shrink with regards the content that is put in to it. It has multiple nested divs to accommodate for layering elements.

The problem I am having is getting it to scroll when the content is larger than max-height.

I believe this is due to all the parent divs being position: absolute. If I make the overflowing element absolute then all I get is the border around a null space IE; a dot. This happens even if I give it a set width and height. If I make it relative then it displays everything properly but the content of the overflowing element goes past the bottom of the containing elements even though it is set to overflow: scroll OR auto.

So I need a way to make the parent elements recognize the size of the overflowing and expand to contain them while allowing the overflowing element to scroll once it gets past a particular size.

html code

<div id="container">
    <div id="border">
        <div id="text">
            TEXT TO BE ENTERED VIA JS
        </div>
    </div>
</div>

css code as it currently stands

#container
{
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
padding: 0;
margin: 0;
}

#border
{
position: absolute;
top: 2.5%;
border: 2px solid black;
border-radius: 20px;
background-color: LightGoldenRodYellow;
padding: 0;
margin: 0% 5%;
max-height: 95%;
overflow: hidden;
}

#text    // this is the part I am having trouble with.
{
position: relative;
max-height:80%;
overflow-y: scroll;
overflow-x: hidden;
}

Upvotes: 2

Views: 19790

Answers (1)

TheNavigat
TheNavigat

Reputation: 865

#container {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 50%;
    padding: 0;
    margin: 0;
}
#border {
    position: absolute;
    top: 2.5%;
    border: 2px solid black;
    border-radius: 20px;
    background-color: lightgoldenrodyellow;
    padding: 0;
    margin: 0% 5%;
    max-height: 95%;
    width: 200px;
    overflow: hidden;
}

#text {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 200px;
}
<div id="container">
    <div id="border">
        <div id="text">TEXT TO BE ENTERED VIA JS saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </div>
</div>

There you go.

Upvotes: 4

Related Questions