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

时间:2016-11-10 16:50:22

标签: html css flexbox microsoft-edge

以下是说明问题的笔:http://codepen.io/derrikcurran/pen/XNmEOZ

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

我有一棵3个div的树; #grandparent> #parent> #儿童。如果#grandparent有overflow: auto而#parent有display: inline-flexmin-height: 100%,那么它似乎适用于所有3种浏览器。但是,如果#child比#parent宽,则#grandparent上会出现一个水平滚动条(正如所期望的那样),并且只有在Edge中,才会出现垂直滚动条。

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

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

我想指出,似乎是由此处描述的众所周知的IE11 flexbox / min-height问题引起的:https://connect.microsoft.com/IE/feedback/details/802625/

1 个答案:

答案 0 :(得分:0)

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

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