Question

我有一些嵌套的flexbox布局，可以在Chrome＆amp; Safari 11+，但在Safari 10.1.2中表现不正确

在Chrome中 - 它看起来像预期的那样：

但是在Safari 10.1.2中：

有人可以帮我弄清楚如何解决？谢谢！

这是我的（稍微简化）HTML：

.content-canvas {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    -o-flex-grow: 2;
    flex-grow: 2;
}

#blog,
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
 }

#divRss,
{
    padding: 10px;
    height: 0;
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    -o-flex-grow: 2;
    flex-grow: 2;
}

.feedEkList,
{
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    -ms-justify-content: space-around;
    -o-justify-content: space-around;
    justify-content: space-around;
}

.feedEkList li,
 {
    height: 0;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-grow: 1;
    -o-flex-grow: 1;
    flex-grow: 1;
}

我的CSS：

{{1}}

Answer 1

当上层Flexbox的内容超过其高度的100％时，我个人在Safari上遇到问题，在这种情况下，嵌套的Flexbox的高度缩小到了1px。

我通过在嵌套的flexbox上设置flexbox-shrink: 0来修复它。

嵌套的flexbox在Safari 10.1.2中不起作用

1 个答案: