css – Wrong display of items in list in FF with overflow-y: auto

Question:

Stumbled upon an issue with displaying the list in FF (works fine in Chrome / IE). The problem is that with overflow: auto in FF, the scullbar eats up the longest item in the list, as if it overlays the scrollbar on top of the list and does not attach it to the side like in IE and Chrome. overflow-y: scroll solves the problem, but in this case, the scrollbar will be displayed constantly, even when it is functionally unnecessary, which is unacceptable in my case. white-space: nowrap also needed, since on demand you need to display items on a single line. It is also advisable to leave the width of the div element at 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;
}
<div>
  <ul>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>REALLY BIG ELEMENT INSERTED HERE!</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
  </ul>
</div>

In general, you can somehow solve this without resorting to JS crutches?

Answer:

You can work around it by wrapping the text in a span and setting the padding-left to the Firefox scrollbar width (about 20px). But the problem is that in other browsers this padding-left will be displayed next to the scrollbar, so the solution is not for everyone, but without unnecessary calculations and JS crutches 🙂

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;
}
<div>
  <ul>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>REALLY BIG ELEMENT INSERTED HERE!</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  <li><span>Element</span></li>
  </ul>
</div>
Scroll to Top