Selected Options disappear in a multiple drop-down select tag with scroll bar in HTML

Answer 1

Not sure why it does that, I can reproduce in Chrome.

This seems to fix it. Setting float: left; min-width: 100%; on the element style.

float: left destroys the default block formatting context behaviour of the tags in the . min-width: 100% just makes it a little more aesthetically pleasing, it ensures that even the tags which have content shorter than the width of the are "fully highlighted" when selected.

P.S. This fixes the issue for Chrome and IE11, won't fix it for IE10- and Firefox as they don't support horizontal scrolling on a element at all :)

.Something {
  overflow-x: scroll;
  width: 16%;
}

option {
  float: left;
  min-width: 100%;
}

Optionfghfghfgdgdffyuujkyujg 1 Optionfghfghfgdgdffyuujkyujg 1 Option n fgnfn ghdnghd ngdh 2 Optionfghfghfgdgdffyuujkyujg 1 Option n fgnfn ghdnghd ngdh 2 Option n fgnfn ghdnghd ngdh 2