Here's the code:
.parent {
position: relative;
display: flex;
height: 150px;
flex-direction: column;
background-color: rgb(0 0 0 / 5%);
outline: 1px solid rgb(0 0 0);
overflow-y: scroll;
}
.absolute-child {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: rgb(255 0 0 / 25%);
outline: 1px solid rgb(255 0 0);
}
.static-child {
flex: 1;
background-color: rgb(0 128 0 / 25%);
outline: 1px solid rgb(0 128 0);
}<div class="parent">
<div class="absolute-child">Absolute child. You'll have to scroll to see the full me.</div>
<div class="static-child">Static child. If you scroll down, you'll see that I do not fill the entire flex, even though I'm set to flex: 1.</div>
</div>I have a flex that has an absolutely positioned element and a statically positioned element. To make the absolute element not just overflow out of the box, I set the parent's position to relative and set overflow-y to scroll.
The problem is the static element. It works fine until you scroll. It seems that, even if you set it's flex to 1, or height to 100%, the height simply becomes the size of the parent, rather than the entire scrollable area's worth of height, which would be what I want.
It almost feels like that's a bug. If the reason for the scrolling of the element were static elements, this would work just fine, but what's causing the scroll here is the absolute element.
