Question

对于我的angular2应用程序我只使用flexbox，除了Safari（和Safari移动）之外，这种方法很好。 Safari的问题在于，100％的弹性项目的css高度将元素大小调整为主应用程序的100％而不是考虑其他弹性项目。也许是因为main-app是位置设置为绝对的第一个父级？我不知道如何解决这个问题。这是代码：

<div class='main-app flexColumn' [style.width.px]='width' [style.height.px]='height' [style.top.px]='posY' [style.left.px]='posX'>
    <menubar class='flex16_7'></menubar>
    <div class='flex81_3'>
        <router-outlet></router-outlet>
    </div>
</div>

使用：

.flexColumn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-width: 0;
    min-height: 0;
}

.flex16_7 {
    flex: 1 1 16.66%;
    width: 100%;
    height: 100%;
}

.flex81_3 {
    flex: 1 1 81.33%;
    width: 100%;
    height: 100%;
}

只有Safari允许菜单栏填充整个主应用程序。这是怎么回事？

Safari flexbox子高度100％填满所有空间

0 个答案: