Steps to reproduce
A block-level element (e.g. DIV) with “height: 100%” and “overflow-y: auto” placed inside a table cell that has been height restricted (height explicitly set on cell, row, or table) will not properly “inherit” the height of the cell and therefore not show a scrollbar when the content of the element exceeds the available height set by the table cell. Instead, the element will size itself to its content and force the table/row/cell to be taller than desired.
I’ve attached an example HTML document showing this issue. If you create a similar arrangement with nested DIVs (with outer DIV having a fixed height and inner DIV the percentage height) instead of a table and a DIV then the scrollbar appears as it should.
Reproducible on Edge and IE 11 (11.0.40), works on Firefox and Chrome.
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Steven K.”
Changed Status to “Duplicate”
Hey there, this is the author of the Tables specification here. The behavior Edge has was until very recently the spec-compliant behavior (height:auto elements are to be sized in such a way that they do not get a scrollbar if that is possible withouth exceeding their max-height, which is possible here).
The behavior you are seeing in Chrome and Firefox might seem identical but in both browsers a different bug was causing it.
That being said, recognizing this behavior has become a de-facto standards, the spec has been changed to make this the expected result, and we are aware of the fact we do not follow the new spec text which matches Chrome’s behavior.
If you need this, the easiest workaround is to get your cell to be position:relative and your scroller position:absolute;width:100%;height:100%. That way, it will not influence the sizing of the cell. There are other variants but this is the easiest one.
This bug has marked as duplicate. Please follow the parent issue to get new updates.