Question

我在这里发现了一个类似的问题，但它的建议对我来说似乎不起作用：Google Chrome - Flexbox + overflow-x:auto

所以，我的#triptychViewer div是一个有两个孩子的flex父级，最右边的孩子似乎是一个麻烦制造者。我已将整个网站的代码缩小到这个范围，这仍然证明了问题：

<html>

    <head>
        <style>
            div { overflow: hidden; }
            #triptychViewer { display: flex; height: 100vh; }
            .triptychMember { overflow: auto; width: 100vw; }
            #mainContent {height: 5000px; }
            #mainContent { background-color: green;}
            #updates { background-color: brown; }
        </style>
    </head>

    <body>
        <div data-role="page" id="wrapper" >
            <div id="triptychViewer">
                <div class="triptychMember">
                    <div id="mainContent"></div>
                </div>
                <div class="triptychMember" id="sidebar"></div>
            </div>
        </div>
    </body>

</html>

在Chrome 47中，水平调整窗口大小使得#sidebar div看起来与相邻div的滚动条重叠（由于其5000px高的子项而出现的滚动条）。垂直调整大小将其恢复到应有的状态，使用可以触摸和单击的滚动条，因为它不在div后面。根据需要重复调整大小，以便重复发生。

Firefox或IE中没有出现此问题。有一个简单的解决方法吗？

Chrome中的奇怪的flexbox /滚动条行为

0 个答案: