Question

我最近一直在制作叠加菜单。它将包含一长串名称（无法避免）。它在Chrome上表现得非常完美，但该列表拒绝在Firefox上滚动。我不知道造成这种情况的是什么，但创建了一个JSFiddle来显示正在发生的事情。

链接here

HTML的一点点：

[
  { "id": 0 },
  { "id": 1 },
  { "id": 2 }
  // and so on
  //.
  //.
]

CSS的一点点：

<div class="full-menu">
  <div class="full-menu--middle">
    <button class="menu-toggle menu-toggle--close"></button>    
    <div class="section group menu_items">
        <ul>
            <li>a bunch of options vvv</li>
        </ul>
    </div>
  </div>
</div>

非常感谢任何帮助！感谢

Answer 1

从display:table;开始.full-menu，从display:table-cell;开始.full-menu--middle，然后将overflow:scroll;添加到.full-menu。

Answer 2

也许您应该将position: absolute;提交给.full-menu，而不是fixed。

Answer 3

如何解决CSS Flex布局中的溢出问题：

“ ......将min-height：0;添加到具有溢出容器的flex子项中...”

https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

在Firefox中滚动错误

3 个答案: