Блок выходит за пределы родителя, что не так?

Question

[lavezzi1]

Здравствуйте. Есть меню селекта, внутри идет список элемента данного селекта. Проблема на скриншоте. Компонент item выпирает за пределы родительского блока и не трункейтится должным образом, должны быть точки в конце. Проблема вроде как решает если убрать display: flex с .select-option, но он по реализации там нужен.



https://jsfiddle.net/09rb8vhy/

Как исправить?

Answer 1

[Павел]

.select-option {
overflow:hidden;
}
.item {  box-sizing:border-box;
  width:auto;
  max-width:100%;
}

Answer 2

[Ilya Loginov]

Укажите ограничения длины для текста и для select-option:

.select-option {
   overflow:hidden;
}

Вот тут пример