I think this might be working as intended. The div is overflowing the top of the box, and when a child overflows it's parent we don't increase the displayed height of the parent. If you put a background color on the table cell, it creates a 20x100 box. However the highlight devtools puts on the box is 104px.

Edge draws a 100px box if you put in a background color, but shows 103.8px as its height. Adding overflow hidden to the table cell cuts off the top in edge, but still shows 103.8px for the height.

Setting the div's height to 100px stops it from overflowing. I am not sure where the extra 4 pixels are coming from, but they are there.

@lushnikov do you know what the intended behavior should be?

This is not a devtools issue, it's a layout problem. I believe it's chrome trying to recover from invalid states.

the td is a "display: table-cell;", the div is a "display: inline-block;".

If the td changes to "display: block" it works as expected or if the div is changed to some other displays it works.

If you toggle the "display: inline-block" on the div, it shows more issues (possibly the same issue, but easier to recreate?)

I am going to send it off to the layout team to further investigate.

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot