Placeholder and selected item overflows and hides the clear-button / arrow

[dannyyy]

Describe the bug
If the slim-select is within a div with a restricted size, then any text (placeholder, item text) will overflow and hides all control elements such as the clear button or the dropdown arrow.

If the layout allows to grow in height, then the selected item's text will be wrapped, and destroys the layout.

I expect (as the slimselect.css indicates), that any text that is longer as the controls width will be cut (ellipsis, ...) and the layout will be maintained under all circumstances

Recreate it in Codepen
https://jsfiddle.net/f5oxh8bq/8/

To Reproduce
Use the demo: https://jsfiddle.net/f5oxh8bq/8/

[brianvoe]

I agree with this. This issue has popped up a few times when people have needed to make css changes in the past

[dannyyy]

This should solve the issue:

.ss-main .ss-values {
  ...
  min-width: 0;
}

.ss-main .ss-values .ss-single {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display:block;
}

.ss-main .ss-values .ss-placeholder {
  ...
  display:block;
}

I updated the example:
https://jsfiddle.net/vq87ah2g/4/

Could you incorporate this change? May there are some more adjusstments necessary for certain settings I haven't used yet