CSS-сетка/гибкая сетка сжимается в зависимости от содержимого, но растет равномерно ⇐ CSS

[Anonymous]

Я создаю панель навигации для своего приложения. Я хотел бы, чтобы мои элементы уменьшались в зависимости от их содержимого, но увеличивались в зависимости от среднего размера.
Все, что я хочу, это:

• если для всех элементов достаточно места, чтобы размер содержимого был максимальным, я хочу, чтобы размер всех элементов был одинаковым.
• если достаточно места для всех элементов min-content, я хочу, чтобы элементы уменьшались в зависимости от их содержимого.
• если для всех элементов недостаточно места, я хочу, чтобы они уменьшались в зависимости от их содержимого, так что самый большой элемент начинает сжиматься первым, пока он не станет таким же большим, как второй по величине элемент, затем оба они начинают сжиматься
  [img]https://i.sstatic .net/UmcguNXE.png[/img]

Я мог бы сделать это, используя сетку или flex.
К сожалению, я не могу добиться ожидаемого поведения поскольку они либо растут в зависимости от своего содержания (а не в зависимости от среднего размера), либо уменьшаются в зависимости от своего среднего размера, а не от своего содержания. Я включил фрагмент с двумя примерами реализации.

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

body {
margin: 0;
font-family: Verdana;
}

.small {
width: 400px;
}

.medium {
width: 800px;
}

.large {
width: 1200px;
}

.container-flex {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
border: 1px solid black;
}

.item-flex {
display: flex;
flex-direction: column;
flex-basis: auto;
flex-shrink: 1;
flex-grow: 1;
overflow: hidden;
padding: 20px;
background-color: green;
border: 1px solid red;
min-width: 0;
}

.title {
background-color: white;
flex-grow:0;
text-align: center;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
min-width: 0;
}

.container-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 1fr);
grid-auto-columns: 1fr;
grid-auto-flow: column;
border: 1px solid black;
}

.item-grid {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 20px;
background-color: green;
border: 1px solid red;
min-width:  0;
}

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

Small
[h4]Flex[/h4]


Title


Long Title


Even longer Title


Title


[h4]Grid[/h4]


Title


Long Title


Even longer Title


Title




Medium
[h4]Flex[/h4]


Title


Long Title


Even longer Title


Title


[h4]Grid[/h4]


Title


Long Title


Even longer Title


Title




Large
[h4]Flex[/h4]


Title


Long Title


Even longer Title


Title


[h4]Grid[/h4]


Title


Long Title


Even longer Title


Title

Различные размеры предназначены только для тестирования, я прошу гибкого решения работа с разным содержимым и разным количеством элементов.

Подробнее здесь: https://stackoverflow.com/questions/787 ... row-evenly