水平滚动条在 Firefox 上不起作用答案

【问题标题】：Horizontal scroll bar doesn't work on firefox水平滚动条在 Firefox 上不起作用
【发布时间】：2022-01-18 06:51:13
【问题描述】：

<div style="margin:0 auto; width: 150px; height: 100px; display: flex; overflow-x: scroll; overflow-y: hidden;">
    <select multiple name="" id="" style="overflow-x: scroll;">
        <option value="">11111111111111111111111111111111111111111111111111111111</option>
        <option value="">11111111111111111111111111111111111111111111111111111111</option>
        <option value="">11111111111111111111111111111111111111111111111111111111</option>
        <option value="">11111111111111111111111111111111111111111111111111111111</option>
        <option value="">11111111111111111111111111111111111111111111111111111111</option>
        <option value="">11111111111111111111111111111111111111111111111111111111</option>
    </select>
</div>

它在 Chrome 上运行良好，但水平滚动条在 Firefox 上不起作用，有什么办法可以解决这个问题吗？

铬火狐

【问题讨论】：

标签： html css firefox

【解决方案1】：

删除display: flex;。如果您想看到没有向右滚动的垂直滚动条，请使用overflow-y: scroll;。

<div style="margin:0 auto; width: 150px; height: 100px; 
            overflow-x: scroll; overflow-y: hidden;">
  <select multiple name="" id="">
    <option value="">11111111111111111111111111111111111111111111111111111111</option>
    <option value="">11111111111111111111111111111111111111111111111111111111</option>
    <option value="">11111111111111111111111111111111111111111111111111111111</option>
    <option value="">11111111111111111111111111111111111111111111111111111111</option>
    <option value="">11111111111111111111111111111111111111111111111111111111</option>
    <option value="">11111111111111111111111111111111111111111111111111111111</option>
  </select>
</div>

【讨论】：