Question

我有以下简单的HTML代码段，它在Chrome和Safari中有不同的结果

    var dt = new Date();
    dt.setMonth(dt.getMonth() - 1);
    collection.find({doj: {$gt:dt}}, function(error, docs) {
        docs.forEach(function (doc) {
            console.log("DOJ = "+ doc.doj);
        }    
  });

在Safari中，内容在Chrome中完美展示，<body> <div id="1" style="position: absolute; display: flex; flex-direction: column; /* height: 78px; */"> <div id="2" style="height: 100%; display: flex; flex-direction: column;"> <div id="3" style="position: relative; overflow: hidden;"> <p><span>CSS</span></p> </div> </div> </div>身高为#3。

如果我执行以下操作之一

将显式高度设置为0
删除#1

height: 100%

删除#2

overflow:hidden

移除#3或disaplay:flex

#1

在Safari中正确计算所有元素的高度。这可能是Safari的Flexbox的一个问题，但不确定是什么触发器。

Answer 1

如果ng test --watch=false是列方向的弹性容器，则#2是具有垂直内联轴的弹性项目。要让#3获取父级的完整高度 - 在不会自动发生的浏览器中 - 只需提供#3此规则：#3或flex: 1。

绝对flexbox容器中flex项中溢出隐藏项的高度

1 个答案: