I came across a problem with displaying the list in FF (it works fine in Chrome / IE). The problem is that when overflow: auto in FF, the scrollbar eats the longest item in the list, as if it puts a scrollbar on top of the list and does not attach it to the side in IE or Chrome. overflow-y: scroll solves the problem, but in this case the scrollbar will be displayed constantly, even when it is not needed functionally, and this is unacceptable in my case. white-space: nowrap also needed, because on demand you need to display elements in one line. The width of the div element is also desirable to leave on 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, can you somehow solve this without resorting to JS crutches?

  • For example, I have the norms displayed, if that - koroche_vot
  • 2
    What is your version of FF? do you reproduce exactly in FF? - Ivan Sychev
  • version 57.0 (last) - koroche_vot
  • I also have 57.0, but it is not displayed completely (the last word has been eaten, not HERE! But HER). - Ivan Sychev
  • In this case, I can only advise you to set the width of the block. FF is a very strange browser) - koroche_vot

1 answer 1

You can get around if you wrap the text in a span and set the padding-left equal to the width of the Firefox scrollbar (approximately 20px). But the problem is that in other browsers this padding-left will be displayed next to the scrollbar, so the decision is not for an amateur, but without extra 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>