У меня есть список слов, который я хотел бы видеть на экране в виде бесконечного текста. Когда вы наводите курсор на одну из них, элемент div расширяется и слева показывает пару скрытых кнопок. Это работает для левого и центрального элементов управления, но самый правый элемент управления сходит с ума, потому что ему не хватает места для расширения. Подскажите, пожалуйста, как мне получить гибкое окно (точно не сетку), которое заполняется текстом?
JS (React):
{
{'\u002B'}
{'\u2665'}
{`${e.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
