Home/ Questions/Q 8646909
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T12:56:01+00:00

I have a three rows CSS table, which is nested in a fixed size

  • 0

I have a three rows CSS table, which is nested in a fixed size div. The table has three rows, the height of first two rows is defined by the contents (I can’t give any explicit sizes) and the last row simply takes what’s left. The last row has a single child, which is a div, having loads of child divs with display: inline-block. The problem I have is – I the div is always overflowed and I want it to display a vertical scrollbar, which only happens in Chromium. FF & Opera simply ignore overflow-y:scroll and let the content run down (I belive IE is the same I just don’t have it). I wonder if the problem can be solved without using javascript and if so how.

I don’t mind using HTML5 only solution as long as it’s supported by the recent versions of all browsers.

Update 1 – Just wanted to make it clear – I can’t use explicit sizes for any of the rows as they host controls of unknown height.

<html>
<body>
    <div style="width: 500px; height: 300px;">
        <div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: #ccc;">Test</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: white;">Filter</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; height: 100%;">
                    <div style="height: inherit; overflow-y: scroll">
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
                        <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s the solution (overflowed div has to be positioned absolutely and wrapped in another relatively positioned one):

    <html>
<body>
    <div style="width: 500px; height: 300px;">
        <div style="display: table; width: 100%; height: 100%; position: relative; border: 1px solid #ccc;">
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: #ccc;">Test</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; background-color: white;">Filter</div>
            </div>   
            <div style="display: table-row;">
                <div style="display: table-cell; height: 100%;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="overflow-y: scroll; position: absolute; top: 0px; right:0px; bottom: 0px; left: 0px;">
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A0</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A1</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A2</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A3</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A4</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A5</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A7</div>
                            <div style="display: inline-block; width: 150px; height: 150px; vertical-align: middle; border: 1px solid #ccc;">A8</div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
</body>
</html>
    • 0