Child to be 100% of the align-self parent, but not more!
Hey everyone. So this is my layout, like on the picture.
Both lef (blue) and right (red) side are made to be: align-self:stretch.
Since the body is min-height: calc(100vh - header height), both left and right side will stretch to the end of the container.
Since my right (red) side doesn't have a predefined height, can my yellow content inside the red element be 100% of it's parent (red element).
But in case it gets more than 100% of the red parent, to set overflow: scroll on it.
The problem is:
As soon as i do lorem20 on yellow element, even tho it has overflow:auto, it will take more than 100% of red height you see on the picture now, since no element has predefined height here, they're all just align-self:stretch.
Question:
Can i somehow make yellow be 100% of red but not more, only 100%.
If yellow has lorem120 on if, it will simply just be max-height of red element?
3 Replies
I'm not sure if i understand your issue but have you tried giving the red element the
overflow:auto;
?.rcontent is a yellow element, and i did.
Thep roblems is that red is align-self stretch, so it doesnt have a height, it stretches.
Since lorem*20 on yellow would make it longer than red, i cant say height:100% on yellow, if yellow gros the prent grows as well
what if put grid on your body