I have encountered a challenge while trying to design a layout with two columns that need to occupy the remaining height of their parent container. However, I want one of the columns to be able to extend beyond these bounds if its content requires it (in my case, an image).
To better illustrate what I'm aiming for, here is an image depicting the desired outcome.
https://i.sstatic.net/veypK.png
Important: The red border in the image represents the screen dimensions (100vw x 100vh).
This is what I have attempted so far:
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
background: orchid;
}
.columns {
flex: 1;
display: flex;
}
.columns>* {
flex: 1;
}
.left {
background: lightgreen;
/* Increase size to exceed 100% */
height: calc(100% + 25px);
}
.right {
background: cornflowerblue;
}<div class="container">
<div class="top">
Top Content
</div>
<div class="columns">
<div class="left">
Left Column
</div>
<div class="right">
Right Column
</div>
</div>
</div>
<div class="additional">
Additional Content
</div>The issue I am facing is that the "additional content" section is not being pushed correctly. This is because the left column overflows but does not technically impact its parent container. It seems like there are conflicting conditions at play and I am unsure how to resolve this. Any suggestions would be greatly appreciated.