Элемент div должен выходить за пределы окна, когда его размер увеличивается. ⇐ CSS

[Anonymous]

У меня есть список слов, который я хотел бы видеть на экране в виде бесконечного текста. Когда вы наводите курсор на одну из них, элемент div расширяется и слева показывает пару скрытых кнопок. Это работает для левого и центрального элементов управления, но самый правый элемент управления сходит с ума, потому что ему не хватает места для расширения. Подскажите, пожалуйста, как мне получить гибкое окно (точно не сетку), которое заполняется текстом?
JS (React):
{words.map(e =>
{

{'\u002B'}
{'\u2665'}
{`${e.name.toUpperCase()}`}
}
)}

)

CSS:
.root {
display: flex;
flex-wrap: wrap;
white-space: nowrap;
width: 100%;
}

.wrapper {
flex-wrap: nowrap;
}

.word {
display: flex;
position: relative;
font-size: 300%;
word-spacing: -12px;
padding: 3px;
overflow: auto;
}

.like {
display: flex;
height: 0px;
width: 0px;
visibility: hidden;
}

.add {
display: flex;
height: 0px;
width: 0px;
visibility: hidden;
}

.country:hover .like {
display: flex;
visibility: visible;
height: 40px;
width: 40px;
padding-right: 5px;
overflow: auto;
}

.country:hover .add {
display: flex;
visibility: visible;
height: 40px;
width: 40px;
padding-right: 5px;
overflow: auto;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... -increased