Как сделать все гибкие элементы одинаковой длины с самым длинным текстом без переноса текста ⇐ CSS

[Anonymous]

Я пытаюсь сделать все одноуровневые гибкие элементы той же ширины, что и элемент с самым длинным текстом, без переноса текста. Таким образом, если у элемента есть текст «Первый», а у другого — гораздо более длинный текст, оба элемента должны по-прежнему иметь одинаковую ширину, не заставляя более длинный элемент оборачивать текст. Если это невозможно с помощью только CSS и у вас может быть решение React, я внимательно слушаю. Спасибо!

Код: Выделить всё

First
Second thing is long
Third is
Fourth is even longer and longer
Fifth
Sixth

Код: Выделить всё

.container {
width: 800px;
display: flex;
background: blue;
overflow: auto; //it's okay if the items overflow and scroll
flex-wrap: nowrap;
height: 130px;
}

.item {
margin: 10px;
background: red; // the color here is to make it easier to see if all the items are the same width
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
flex-basis: calc(100% / 6); //the number 6 here will be dynamic, but it will always be the number of items in the container
}

На этом изображении показано, как он выглядит сейчас

Подробнее здесь: https://stackoverflow.com/questions/790 ... xt-with-no