Наткнулся на проблему с отображением списка в FF (в Chrome/IE работает нормально).
Проблема в том что при overflow: auto в FF скорллбар съедает самый длинный элемент в списке, как будто накладывает скроллбар поверх списка а не прикрепляет его сбоку как в IE и Chrome. overflow-y: scroll решает проблему, но в таком случае скроллбар будет отображаться постоянно, даже когда он функционально не нужен, а это в моем случае неприемлемо. white-space: nowrap тоже нужен, так как по требованию нужно отображать элементы одной строкой. Ширину div элемента тоже желательно оставить на width: auto
div {
display: block;
min-width: 40px;
width: auto;
position: absolute;
top: 50px;
left: 100px;
background: #fff;
z-index: 102;
max-height: 100px;
overflow-y: auto;
overflow-x: visible;
border-radius: 5px;
box-shadow: 0px 5px 60px -7px #808e95;
padding: 20px 10px;
margin: 5px 0 0;
}
ul {
overflow: hidden;
white-space: nowrap;
list-style: none;
margin: 0;
padding: 0;
}
- Element
- Element
- Element
- Element
- Element
- Element
- REALLY BIG ELEMENT INSERTED HERE!
- Element
- Element
- Element
- Element
- Element
- Element
В общем можно как-то это решить не прибегая к JS костылям?
Ответ
Можно обойти если обернуть текст в span и задать padding-left равный ширине Firefox скроллбара (примерно 20px). Но проблема в том, что в остальных браузерах этот padding-left будет отображаться рядом со скроллбаром, поэтому решение на любителя но зато без лишних вычислений и JS костылей :)
div {
width: auto;
position: absolute;
top: 100px;
left: 100px;
background: #fff;
max-height: 100px;
overflow-y: auto;
overflow-x: visible;
border-radius: 5px;
box-shadow: 0px 5px 60px -7px #808e95;
}
ul {
overflow: hidden;
margin: 0;
padding: 0;
}
span{
padding-right: 22px;
display: inline-block;
white-space: nowrap;
}
- Element
- Element
- Element
- Element
- Element
- Element
- Element
- REALLY BIG ELEMENT INSERTED HERE!
- Element
- Element
- Element
- Element
- Element
