Is it possible for a parent to inherit child's width if the contents of the column has overflowed so I used flex-flow: column wrap to wrap the child and placed the next elements to create another column? I was expecting that the column would expand
The next elements are displayed correctly and created another column, but the problem is the column didn't expand and so the wrapped elements overlapped the next parent column.
<div class="grid-container"><div class="column"><div class="element">Element 1</div><div class="element">Element 2</div><div class="element">Element 3</div><div class="element">Element 4</div><div class="element">Element 5</div><div class="element">Element 6</div><div class="element">Element 7</div><div class="element">Element 8</div><div class="element">Element 9</div><div class="element">Element 10</div><!-- More elements here --></div><div class="column"><div class="element">Element 11</div><div class="element">Element 12</div><div class="element">Element 13</div><!-- More elements here --></div><div class="column"><div class="element">Element 21</div><div class="element">Element 22</div><div class="element">Element 23</div></div><div class="column"><div class="element">Element 31</div><div class="element">Element 32</div><div class="element">Element 33</div></div><div class="column"><div class="element">Element 41</div><div class="element">Element 42</div><div class="element">Element 43</div></div></div>.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;}
As you can see in this picture, the element with red borders are the columns, and the blue bordered boxes are the elements. The first column has more child elements, and it overlapped on the second column.
The problem is, that the number of columns is indeterminate, and the number of elements for each column is also indeterminate, that's why each column may have a different width depending on its children. That's why I'm asking if it is possible for each column to grow or inherit its children's width? Thanks!