CODEWITHSUNDEEP
css
MadzQuestioning
MadzQuestioning

Reputation: 3772

Wrap div vertically

I have a div tag that has a fixed height. So let say that container is 300px in height. Now I have Multiple div within this parent container. Now the content of this div is dynamic so I don't know how many child element will it contain. How can I make the parent container wrap the children vertically? So meaning if I have 3 child container and the sum of it's height exceed 300px then the remaining should be place on the next column.. Below is a sample of the markup

<div class="parent_container">
    <div class="child" id="child_one">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_two">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
</div>

Now let say the element has this height generated dynamically

  1. parent_container = height: 300px;
  2. child_one = height: 120px;
  3. child_two = height: 100px;
  4. child_three = height: 100px;

As you can see the parent height is only 300px. Now if we place all three child container it will have a height more than it's parent. So what I was thinking is wrapping this element vertically. So whenever the height of the child element exceeds the parent it will automatically wrap into the second column. So for this example the child_three should be place in the next column

Upvotes: 0

Views: 359

Answers (1)

Chris Li
Chris Li

Reputation: 2671

yes, with flex-direction: column; flex-wrap: wrap;

.parent_container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: baseline;
}
.child {
  width: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}
#child_one {
  height: 120px;
}
#child_two {
  height: 100px;
}
#child_three {
  height: 100px;
}
<div class="parent_container">
    <div class="child" id="child_one">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_two">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
    <div class="child" id="child_three">... <!-- Multiple element inside that contribute to this element height --></div>
</div>

Upvotes: 1

Related Questions