CSS: наследовать ширину дочерних элементов, которые имеют столбцы внутри столбца [дубликат] ⇐ CSS

[Anonymous]

Может ли родительский элемент наследовать ширину дочернего элемента, если содержимое столбца переполнилось, поэтому я использовал flex-flow: Column Wrap, чтобы обернуть дочерний элемент, и поместил следующие элементы для создания другого столбца? Я ожидал, что столбец расширится.
Следующие элементы отображаются правильно, и был создан еще один столбец, но проблема в том, что столбец не расширился, и поэтому обернутые элементы перекрывали следующий родительский столбец. .

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

Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10



Element 11
Element 12
Element 13



Element 21
Element 22
Element 23


Element 31
Element 32
Element 33


Element 41
Element 42
Element 43

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

.grid-container {
display: flex;
gap: 10px;
width: 100%;
}

.column {
display: flex;
height: 500px;
flex-flow: column wrap;
border: 2px solid red;
min-width: 250px;
width: auto;
}

.element {
width: 250px;
height: 100px;
border: 1px solid steelblue;
padding: 10px;
box-sizing: border-box;
}

Как вы можете видеть на этом рисунке, элемент с красной рамкой — это столбцы, а поля с синей рамкой — это элементы. В первом столбце больше дочерних элементов, и они перекрываются со вторым столбцом.
Проблема в том, что количество столбцов неопределенно, и количество элементов для каждого столбца также неопределенно. , поэтому каждый столбец может иметь разную ширину в зависимости от его дочерних элементов. Вот почему я спрашиваю, возможно ли, чтобы каждый столбец увеличивался или наследовал ширину своих дочерних элементов? Спасибо!

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