Add scrollbar without shrinking div

Question

I have following HTML

<div id="main">
    <div id="subdiv"> <span>
            Some Text
        </span>
    </div>
</div>

CSS

#main {
    height: 300px;
    border:2px solid green;
    width:100%;
   overflow:auto;
}
#subdiv {
    width:90%;
    height:90%;
    border: 2px solid red;
}

Now when the browser window size is reduced i want the subdiv to remain always it's original size i.e 90% and just add scrollbar to main div, but no matter what i try the subdiv is also getting reduced.

Like in this JSFIDDLE, want the div having red margin to remain constant and add scroll bar to div having green border.

@RoryMcCrossan I don't think it is duplicate, these 2 question are totally different — Richa, Feb 23 '15 at 10:59
Hey by any chance, have you fixed it? Because I am having the same error also — QWERTY, Aug 04 '17 at 04:06

score -1 · Answer 1 · answered Feb 23 '15 at 10:56

-1

Remove the Width and height from the subdiv.

answered Feb 23 '15 at 10:56

Demo Ashish

110
1
9

Not working. I have attached sample fiddle,please do check it :) – Richa Feb 23 '15 at 10:58
Ohi sorry just delete the height of the sub div it will work... – Demo Ashish Feb 23 '15 at 11:02
Not working. Did you get my question. The subdiv should always be as it is inital size – Richa Feb 23 '15 at 11:03
You mean to say you want give scrollbar to outer div instead of the window...please give me some example so that i can help you.. – Demo Ashish Feb 23 '15 at 11:05
Yes right .Outer div gets scrollbar and innerdiv remains unchanged:) – Richa Feb 23 '15 at 11:06
Use the following link add the jquery http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html – Demo Ashish Feb 23 '15 at 11:10
You have not understood my question dear – Richa Feb 23 '15 at 11:15

Add scrollbar without shrinking div

1 Answers1