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?
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
font-family: sans-serif;
color: var(--color);
/* outline: 1px solid red; */
}


header {
padding: 30px;
background-color: black;
color: white;
}

.content {
padding: 30px;
background-color: #454545;
min-height: calc(100vh - 78px);

display: flex;
}

.right {
width: 400px;

background-color: red;
align-self: stretch;
}

.left {
align-self: stretch;
flex-grow: 1;
background-color: blue;
}

.rcontent {
display: block;
max-height: 400px;
overflow: auto;
background-color: yellow;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
font-family: sans-serif;
color: var(--color);
/* outline: 1px solid red; */
}


header {
padding: 30px;
background-color: black;
color: white;
}

.content {
padding: 30px;
background-color: #454545;
min-height: calc(100vh - 78px);

display: flex;
}

.right {
width: 400px;

background-color: red;
align-self: stretch;
}

.left {
align-self: stretch;
flex-grow: 1;
background-color: blue;
}

.rcontent {
display: block;
max-height: 400px;
overflow: auto;
background-color: yellow;
}
No description
3 Replies
Mannix
Mannix14mo ago
I'm not sure if i understand your issue but have you tried giving the red element the overflow:auto;?
Destiny's Child
Destiny's Child14mo ago
.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
Mannix
Mannix14mo ago
what if put grid on your body
display: grid;
grid-template-rows: auto 1fr;
height: 100dvh;
display: grid;
grid-template-rows: auto 1fr;
height: 100dvh;
Want results from more Discord servers?
Add your server