Block-level element with "height: 100%" and "overflow-y: auto" inside height-restricted table cell does not show a scrollbar

Duplicate Issue #11404831 • See Issue #280052

Details

Author
Christian J.
Created
Mar 27, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Duplicates
See progress on Bug #280052
Found in build #
14.14393
Reports
Reported by 1 person

Sign in to watch or report this issue.

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.

Attachments

1 attachment

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.

     

    https://drafts.csswg.org/css-tables-3/#row-layout

     

    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.

You need to sign in to your Microsoft account to add a comment.

Sign in