内容上的Safari flex子水平滚动条（错误的内容高度）

LukášŘádek

我正在创建带有子项的水平滚动div（flex子项）。

除Safari之外，它在任何地方都适用。

在此可能不会在StackOverflow代码示例上显示问题，因为它取决于“所有”父对象的高度属性。这就是为什么我将html和body设置为高度100％的原因。

html, body {
        height: 100%;
        width:100%;
    }
    
    #flexCont {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #scrollable {
        height:150px;
        white-space:nowrap;
        overflow-y:hidden;
        overflow-x:scroll;

        /* just for visualization */
        border:1px solid black;
        width:250px;
    }

    .item {
        display: inline-block;
        height:100%;

        /* just for visualization */
        border-bottom:15px solid black;
        box-sizing: border-box;
        margin-right:5px;
        width:50px;
        background: red;
    }

<html>
    <body>
    
    <div id="flexCont">
    <div id="scrollable">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    </div>
    
    </body>
    </html>

问题是，即使显示了水平滚动条并且内容区域较小（135像素），Safari也将其.item高度设置为高度的100％#scrollable（150像素）。

这导致滚动条出现在内容上方。

Chrome和其他浏览器正确地将.item的高度设置为135px（假设滚动条为15px）。

如前所述，它取决于所有父母的身高属性。意思是如果我height 100%从移除html，body或者#flexCont它呈现正确。此外，如果我删除display flex或至少flex-direction column，它也会正确渲染。

我添加了底部的黑色边框以更好地形象化它。如果看不到它们，它们将隐藏在滚动条的后面。

知道如何解决吗？

在Chrome上可见的底部15像素（黑色），在Safari上滚动条的下方。

编辑：该死的Safari ...尝试使用修复它时，添加border-bottom并box-sizing创建了另一个问题（至少）max-height:fill-available。解决方案必须不受限制地进行测试。

吉斯图伯先生

添加height: fill-available;到.item似乎可以解决此问题。

.item {
    height: 100%;
    height: -webkit-fill-available;
}

编辑：删除-moz-fill-available，fill-available因为它们不是解决Safari中问题的必要，并且在Firefox中破坏了布局。
此外请注意，在Safari中，.item如果您希望所有子项都具有基于其父项（.item）的高度，则必须对所有子项使用-webkit-fill-available ，这会带来更多问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-25

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章

内容上的Safari flex子水平滚动条（错误的内容高度）

内容上的Safari flex子水平滚动条（错误的内容高度）

Android Studio Kotlin：提取为常量

IE 11中的FormData未定义

计算数据帧R中的字符串频率

如何在R中转置数据

如何使用Redux-Toolkit重置Redux Store

Excel 2016图表将增长与4个参数进行比较

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

未捕获的SyntaxError：带有Ajax帖子的意外令牌u

OpenCv：改变 putText() 的位置

ActiveModelSerializer仅显示关联的ID

算术中的c ++常量类型转换

如何开始为Ubuntu开发

将加号/减号添加到jQuery菜单

去噪自动编码器和常规自动编码器有什么区别？

获取并汇总所有关联的数据

OpenGL纹理格式的颜色错误

在 React Native Expo 中使用 react-redux 更改另一个键的值

http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

TreeMap中的自定义排序

Redux动作正常，但减速器无效

如何对treeView的子节点进行排序