Kevin Powell - Community•15mo ago

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;
}

3 Replies

Mannix•15mo ago

I'm not sure if i understand your issue but have you tried giving the red element the overflow:auto;?

Destiny's ChildOP•15mo 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•15mo 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;

Gaming

Programming

Child to be 100% of the align-self parent, but not more!