CODEWITHSUNDEEP
htmlcssfirefox
JsCoder
JsCoder

Reputation: 1733

Overflown DIV doesn't display vertical scroll bar when placed inside 100% height container

How do I make container div to display vertical scrollbar in Firefox (it works in Chrome and I don't care about IE*)? By 'make' I means make it working wit no use of JS.

Fiddle

<html>
<head>
    <title></title>
    <style type="text/css">

        .full-size { width: 100%; height: 100%; }
        .full-height { height: 100%; }
        .table { display: table; }
        .table-row { display: table-row; }
        .table-cell { display: table-cell; }
        .thin-border { border: 1px solid gray; }
        .border-box { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
        .small-box { width: 50px; height: 50px; }
    </style>
</head>
<body>
    <div style="width: 400px; height: 200px; margin: 10px; border: 1px solid #ccc;">
        <div class="full-size table">
            <div class="table-row" style="height: 45px;">
                <div class="table-cell">
                    <p>Test</p>
                </div>
            </div>
            <div class="table-row full-height">
                <div class="table-cell full-height" style="overflow: hidden;">
                    <div class="full-height" id="container" style="overflow-y: scroll;">
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 4

Views: 3365

Answers (1)

Pogrindis
Pogrindis

Reputation: 8101

<body>
    <div style="width: 400px; height: 200px; margin: 10px; border: 1px solid #ccc; ">
         <div class="table-row" style="height: 45px;">
                <div class="table-cell">
                    <p>Test</p>
                </div>
            </div>
        <div class="full-size table">

            <div class="table-row full-height"style="height:200px; overflow-y:scroll;>
                <div class="table-cell full-height" >
                    <div class="full-height" id="container" >
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                        <div class="small-box">A</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Updated! :

http://jsfiddle.net/v3Ccj/

Basically you just had your overflow in the wrong place!

Keep in mind the parent can have overflow hidden - then the child can have the extra scroll, so that you have a bit more controll over each div's overflow.

Reference : http://www.w3schools.com/cssref/pr_pos_overflow.asp

Coincidentally this will also IE.. :)

Upvotes: 3

Related Questions