Как сделать рамку на 100% ширины дочернего элемента при скролле?

Question

[weranda]

Приветствую.
Есть HTML+CSS и не получается сделать рамку у дочерних элементов при горизонтальном скролле так, чтобы она была на 100% ширины элемента. Подскажите как ее растянуть.
Вот код. Рамка с красной обводкой должна растягиваться на 100%.

Answer 1

[SuperToster]

Укажите для .item display: inline-flex вместо display: flex ...

Comments

[weranda]

Спасибо. Почти сработало. Если строки одинаковой длины, то все норм. Если же строки разной длины, то они разной длины. Как их сделать равными? Пример чуть изменил.

[SuperToster]

weranda,
понимать бы, что вы в итоге хотите получить.. было бы проще : )

.wrap {
	max-width: 300px;
	overflow: auto;
	border: 2px solid blue;
	background: hsl(0, 0%, 90%);
}

.items {
	padding: 10px;
	display: inline-flex;
	flex-direction: column;
}

.item {
	display: flex;
	border: 2px solid red;
}

.item div {
	padding: 5px 20px;
	white-space: nowrap;
}

[weranda]

SuperToster, Еще раз, спасибо.