Запретить перенос текста элемента сетки на новую строку ⇐ CSS

[Anonymous]

Желаемый результат:
У меня есть динамическое количество элементов div, которые я хочу отобразить в виде сетки. он должен начать заполнять элементы до тех пор, пока не будет достигнута максимальная ширина контейнера, после чего он начнет новую строку. Столбцы во всех строках должны располагаться на одной строке, выравниваться по началу и расширяться, чтобы вместить самый длинный текст в столбце.

< div class="snippet-code">

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

.flex {
display: flex;
width: 600px;
}
.grid {
display: grid;
flex-grow: 1;
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}
.grid-item {
background: red;
height: 25px;
border: 1px solid white;
padding: 5px 10px;
}
.another-div {
margin-left: 10px;
}

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

test text
Test longer  text
Maybe a little bit more text so it overflows
Another long  text that will overflow abit
More text
More text
More text



 Select one
1
2
3

Я видел все другие связанные вопросы, и наиболее распространенным решением было использование minmax (0, 1fr), поскольку у меня динамическое количество элементов div и я хочу, чтобы ширина столбца была динамической в ​​зависимости от длины текста, мне нужно использовать повтор (auto-fit, minmax(0, max-content))
Проблема:
когда текст в одном div длиннее 1fr (количество элементов div/ширина контейнера), текст переносится на следующую строку, если я использую пробел: nowrap; для элемента сетки, чтобы предотвратить перенос, он переполняется по горизонтали, а Ширина элемента не увеличивается по размеру текста.

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

.flex {
display: flex;
width: 600px;
}

.grid {
display: grid;
flex-grow: 1;
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
}

.nowrap {
white-space: nowrap;
background: red;
height: 25px;
border: 1px solid white;
padding: 5px 10px;
}

.another-div {
margin-left: 10px;
}

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

test text
Test longer text
Maybe a little bit more text so it overflows
Another long text that will overflow abit
More text
More text
More text



 Select one
1
2
3

CodePen

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