CODEWITHSUNDEEP
htmlcss
Gravity Grave
Gravity Grave

Reputation: 2862

How do I make an outer div with overflow:auto expand to the height of its contents up to a point?

I have a div (frame_outer) that contains another div (frame_inner) with dynamic content inside of it. What I want is for frame_outer to expand its height automatically until it either hits the height of frame_inner or its own max-height.

It may be worth mentioning that the reason I have frame_outer in the first place is because sometimes I want frame_inner's content to expand horizontally without blowing out the side of the page (hence overflow:auto on frame_outer).

JSFiddle is here.

I've tried playing with clear:both, height:auto, display:block in various ways but nothing seems to work.

Fiddle's Code:

HTML:

<div class="frame_outer">
    <div class="frame_inner">
        <ul class="my-col">Important stuff</ul>
        <ul class="my-col">Important stuff
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff yay yay cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
            <li class="inside-col">Cool stuff</li>
        </ul>
        <ul class="my-col">Important stuff</ul>
    </div>
</div>

CSS:

.frame_outer {
    overflow: auto;
    position: relative;
    border: 1px solid black;
    max-width: 320px;
    max-height: 640px;
    /* I don't know how to make my stuff appear without manually setting height like below */
    /* height: 1000px; */
    /* What I want is for frame_outer to expand automatically either until it hits the height of frame_inner or its max-height*/
}
.frame_inner {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
}
.my-col {
    list-style-type: none;
    float: left;
    margin: 0;
    border: 1px solid white;
    background: #eeeeee;
    width: 20%;
}
.inside-col {
    background: #ebe7eb;
    padding: 4px;
    margin-top: 100px;
    border: solid #808080 1px;
    width: 90%;
    word-wrap: break-word;
    display: inline-block;
}

Upvotes: 0

Views: 321

Answers (3)

tarun chine
tarun chine

Reputation: 145

try this....

$(".frame_outer").css("height",$(".frame_inner").css("height"));

Upvotes: -1

Avijit Kumar
Avijit Kumar

Reputation: 538

The issue was happening because frame_inner had absolute position to it.

Removing that and just giving width and float property makes it appear inside frame_outer. And also it is horizontal as well as vertically scrollable.

This is the class which I updated,

.frame_inner {
    float:left;
    width: 150%;
}

Check the updated JSFIDDLE

Hope this solves your problem.

Upvotes: 2

Pasquale Muscettola
Pasquale Muscettola

Reputation: 405

Removing position: absolute; from .frame_inner worked for me

Upvotes: 1

Related Questions