parent container not taking content height when set to relative

Question

I have,

HTML,

<div class="outer">
    <div class="inner"></div>    
</div>

CSS,

.outer {
    position: relative;
    overflow: scroll;    
    border : 1px solid red;
    height: auto;
}
.inner {
    position: absolute;
    width: 1200px;
    height: 895px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border : 1px solid yellow;
}

Issue : - Outer does not take complete height of inner content

Expected : - It should take complete height

Note

I can not hard code outer height

I want a scrollbar on outer.

http://jsfiddle.net/sefkao23/

if the inner is in absolute, the outer doesn't take it into account to compute its height: this is the expected behaviour — Fabrizio Calderan, Sep 16 '15 at 12:27
@Pilot tell us why you need it to be absolute? Otherwise your only workaround is JS to put .outer's height manually based on .inner height. — Zoran P., Sep 16 '15 at 12:29
remove position: absolute from inner, if not necessary. Otherwise explain in your question (not inside the comment) what are you trying to achieve — Fabrizio Calderan, Sep 16 '15 at 12:29

score 0 · Answer 1 · answered Sep 16 '15 at 12:25

Hi now try to this way

You just define your .outer class width or height as like this

.outer {
    position: relative;
       height: 895px; 
    border : 1px solid red;
    width: 1200px;
}
.inner {
    position: absolute;
    
   
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border : 1px solid yellow;
}

<div class="outer">
    <div class="inner"></div>    
</div>

parent container not taking content height when set to relative

Note

1 Answers1