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:
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
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.
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.