Возможно ли в сетке CSS, чтобы сделать левые и правые треки ровно равны, минимальный размер и дают оставшееся пространст ⇐ CSS

[Anonymous]

В ряду сетки с тремя треками я хотел бы иметь левый и правый треки ровно одинаково размер, при этом уважая больший мин-контент из двух, и средняя дорожка, чтобы занять оставшееся пространство, независимо от размера его содержимого. Следующий HTML+CSS иллюстрирует проблему: < /p>

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

nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
/* grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); */
background: green;
align-items: center;
overflow: hidden;
}

.box {
box-sizing: border-box;
overflow: hidden;
}

.scroll-container {
position: relative;
}

ul {
display: flex;
border: 1px solid black;
border-radius: 4px;
list-style: none;
padding: 0;
overflow-x: auto;
position: relative;

li {
padding: 8px 16px;
white-space: nowrap;

&:not(:last-child) {
border-inline-end: 1px solid black;
}
}

}

.edge {
padding: 8px;
white-space: nowrap;
}

.right {
justify-self: end;

}< /code>


Super Cool App


[list]
[*]First Link Item
[*]Second Link Item
[*]Third Link Item
[*]Fourth Link Item
[*]Fifth Link Item
[*]Sixth Link Item
[*]Seventh Link Item
[*]Eighth Link Item
[*]Ninth Link Item
[*]Tenth Link Item
[/list]



X

< /code>
< /div>
< /div>
< /p>
grid-template-columns: 1fr auto 1fr;

довольно хорошо описывает то, чего я хочу достичь, но не работает. Вместо этого, так как 1FR по существу эквивалентен Minmax (Auto, 1FR) Как отметили другие в другом месте, треки краев уменьшаются до 0 ширины, а средняя дорожка займет все пространство. Что-то вроде сетки-колонны: Minmax (min-content, 1FR) Auto MinMax (MIN-Content, 1FR); дает несколько лучшего результата, но не то, что я хочу, потому что это уменьшит края до мин-контента , что отличается для каждого из них, т.е.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ual-minimu