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 \[code\]divs\[/code\] with \[code\]display: inline-block\[/code\]. The problem I have is - I the div is always overflowed and I want it to display a vertical scrollbar, which only happens in \[code\]Chromium\[/code\]. FF & Opera simply ignore \[code\]overflow-y:scroll\[/code\] 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 \[code\]HTML5\[/code\] 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.\[code\]<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>\[/code\]
CSS table cell overflow is ignored by FF & Opera
- Thread starter smoke
- Start date