I am dealing with a div tag that has a set height of 300px. Inside this parent container, there are multiple child divs and the content within them is dynamic so I cannot predict how many child elements there will be. How can I make sure that the parent container wraps the children vertically? In other words, if the combined height of all child containers exceeds 300px, the excess should flow into the next column. Below is an example of the code:
<div class="parent_container">
<div class="child" id="child_one">... <!-- Content contributing to element height --></div>
<div class="child" id="child_two">... <!-- Content contributing to element height --></div>
<div class="child" id="child_three">... <!-- Content contributing to element height --></div>
</div>
Now, let's assume the following dynamically generated heights for the elements:
- parent_container = height: 300px;
- child_one = height: 120px;
- child_two = height: 100px;
- child_three = height: 100px;
Given that the total height of the parent is only 300px and placing all three child elements would exceed this height, I need a solution to wrap these elements vertically. This means that when the height of a child element surpasses that of the parent, it automatically moves to the next column. For this scenario, the child_three should be positioned in the second column.