Заполнить строку элементами фиксированной максимальной ширины ⇐ CSS

[Anonymous]

Когда в контейнере есть свободное место, браузер увеличивает ширину элементов, чтобы заполнить его.
Мне нужно противоположное поведение, чтобы браузер уменьшал ширину элементов настолько, чтобы освободить место для следующий элемент.
Я знаю, как это сделать с помощью JS, но мне хотелось бы использовать чистый CSS-решение.
Я разместил код JS ниже, чтобы вы могли увидеть, что я делаю. среднее значение.

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

function resizeLayout() {
var item_max_size = 200;

var container = document.getElementsByClassName('container')[0];
var container_width = container.getBoundingClientRect()['width'];

var items_need = Math.ceil(container_width / item_max_size);
var new_width = container_width / items_need + 'px';
var items = container.getElementsByClassName('item');

for (const node of items) {
node.style.width = new_width;
}
}

window.addEventListener('resize', function(e) {
resizeLayout();
});

window.addEventListener('load', function(e) {
resizeLayout();
});

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

html {
height: 100%;
}

body {
margin: 0px;
width: 100%;
height: 100%;
}

.container {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
background: yellow;
}

.item {
background: green;
border: 2px black dashed;
box-sizing: border-box;
width: 200px;
height: 200px;
}

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

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