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

Question

这是一个说明问题的笔： http ： //codepen.io/derrikcurran/pen/XNmEOZ

我现在担心的浏览器是Chrome，Firefox和Edge。

我有一个3 div的树; #grandparent> #parent> #child。 如果#grandparent有overflow: auto和#parent有display: inline-flex和min-height: 100% ，它似乎在所有3个浏览器中运行良好。 但是，如果#child比#parent宽，则#grandparent上会出现一个水平滚动条（正如所期望的那样），并且只有在Edge中，才会出现垂直滚动条。

似乎Edge中的最小高度计算没有考虑水平滚动条的高度。 事实上，Edge的水平滚动条高12px， min-height: calc(100% - 12px)解决了这个问题。

有没有办法在没有使用嗅探或Javascript的情况下解决这个问题？ 这是Edge的错误吗？ 要清楚，我需要#grandparent向两个方向滚动，但只有当#child比#parent高时才需要。

我想指出，这似乎不是由这里描述的众所周知的IE11 flexbox / min-height问题引起的： 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 */
}

我修复了你的溢出，所以页面不滚动。 如果您不想滚动条，请使用“隐藏”。