为什么在使用inline-flex和min-height时会出现垂直滚动条：100％而Edge中存在水平滚动条？

Question

Here's a pen illustrating the issue: http://codepen.io/derrikcurran/pen/XNmEOZ

The browsers I'm worried about for now are Chrome, Firefox, and Edge.

I have a tree of 3 divs; #grandparent > #parent > #child. If #grandparent has overflow: auto and #parent has display: inline-flex and min-height: 100% , it seems to work well in all 3 browsers. However, if #child is wider than #parent, a horizontal scrollbar appears on #grandparent (as expected and desired) and, only in Edge, a vertical scrollbar appears as well.

It seems that the minimum height calculation in Edge is not taking the height of the horizontal scrollbar into account. In fact, Edge's horizontal scrollbar is 12px tall and min-height: calc(100% - 12px) solves the problem.

Is there some way to work around this without useragent sniffing or Javascript? Is it a bug with Edge? To be clear, I need #grandparent to scroll in both directions, but only when #child is taller than #parent.

I'd like to point out that this does not appear to be caused by the well known IE11 flexbox/min-height issue described here: https://connect.microsoft.com/IE/feedback/details/802625/

Answer 1

  #grandparent {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden; /* Your solution */
    overflow-y: auto; /*Other half */
}

I fixed your overflow, so the page doesn't scroll. If you want no scroll bars use "Hidden" for both.