Live Link
As soon as I put the flex-wrap property on the parent container, the child items are coming out of the parent container.
Is this still a flex behavior? Should not the height auto-adjust for the child where the container boundary is the fence.
Not in my Chromium, or I don’t understand the issue. 
Can you share the snapshot? I am creating the GIF in the meanwhile.
Golden square border is .container, and is parent. Childs are coming out of parents fence.
They will only pop out of the parent when their height exceeds the height:100vh you added to the parent.
That’s why I tell people to avoid fixed heights on fluid elements about three times a day
Use min-height:100vh instead 
Sur, I will remember this, but I think the default each property of flex is set to flex(adjustable).
When we set height: 100 on the parent the child didn’t have any height definition, but only width. so shouldn’t they would have adjusted to the maximum available height of the container. or somehow by mistake, we have given height to a child also.Here is the code:
.box{
color: white;
font-size: 100px;
text-align: center;
padding: 10px;
text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
.box1{background: #1abc9c;}
.box2{background: #3498db;}
.box3{background: #9b59b6;}
.box4{background: #34495e;}
.box5{background: #f1c40f;}
.box6{background: #e67e22;}
.box7{background: #e74c3c;}
.box8{background: #bdc3c7;}
.box9{background: #2ecc71;}
.box10{background: #16a085;}
.container {
display: flex;
border: 10px solid goldenrod;
height: 100vh;
flex-wrap: wrap;
}
.box{width: 33.3333%;}
Reframing the question:
May be if we can reframe question: how to tell child elemet to adjust in flexible way vertically, but do not violate parent fence.
How much height do you think this takes up?
If you put too much content into an element then it overflows the parent. You would have to either hide the overflow on the parent, or hide the overflow on the child (e.g. restrict its height but that’s not feasible as you don’t know how many rows you may have).
Alternatively you scale the element and content smaller based on viewport height which again is not easy (font sizes can use vh). At the end of the day the problem is that you put content inside that is too big for the design you want to achieve.
In most cases if the design you want to achieve is not logical then its not the right approach
I got it now.
the margin(left + right = 20px) that I have given to box I have accounted that in the .box css, but still 3 items are not getting aligned.
But as soon as I set to -40 px in calc function it does.
What does that means the parent container has a border → Do we have to negate that also?
Yes, because that number will include space for the 8+8px margin on the body element.
(The viewport unit is referring the total visible browser window.)
No its the 10px padding that is causing the problem but its much easier to use border box model instead and padding and borders won’t be in the equation (if they are on that element).
.box{box-sizing:border-box;}
You still need to account for margins as that is outside the box.
[edit]
I edited my answer as although your screenshot shows the padding commented out there is 10px padding coming from the original .box rule.
{/edit]
If you want a consistent 10px gap around the boxes then I would put 5px padding on the container and then 5px margin on the boxes. that will give 10px space around each box and not 10px at the sides and 20px in the middle as in your example. You will need to adjust the cals to -10px of course.
You could use the gap property but its not supported in Safari yet.
Ok thanks.
No its on the other box rule:slight_smile:
On another matter also remember though what Erik said about your height:100vh box as that cause a scrollbar because you have 8px default body margin.
Please bear with me. Please help me to understand what is this? body by default in browser has 8px margin? Is this what you want to convey?
Yes the body has default margins of 8px (in nearly all browsers) which means that your container at 100vh is 16px too tall for any viewport and will induce a vertical scrollbar when none is needed.
Either remove the default margin from the body (body{margin;0;}) or if you do want a margin then set it explicitly to the measurement you prefer and then account for it on your 100vh rule (using calc)
Also remember that 100vh will be 100% of the viewport height plus any padding and borders on that element unless you use the border-box model where padding and borders will be contained withing the 100vh.
I was trying something on the live link, but why is the num span element breaking: occupying the whole vertical space on lees width. Is it because of span elements property or some flex property overriding on it?
The num.span is taking the full height of .element at all times because that’s what flex boxes do by default.It is matching the height of the text next to it. If you add a border to .slide you will see that this is true.
The golden border on .wrapper has a space because its the arrow div that is initially creating the height on the wrapper. Once the text wraps in the slide then the text is taller than the arrows and all the num boxes in .slide follow with the change of height.
Remove the arrows and you will see the num boxes maintain the full height at all times. You are getting confused because the arrows and the slide are separate constructs but are contained within the same wrapper.
If you don’t want the num boxes to stretch then give them a top and bottom auto margin.
Ok Thanks, So it was because of flex behavior.
Yes the default behaviour of flex items is to stretch just like table cells. That’s why its so useful
You can see it in a simplified demo of yours.
