Adding Another Dilemma to the Position Sticky and Display Flex Mix
I'm facing a new challenge with a webpage layout that involves nested flex containers. The layout consists of an outermost container with a row direction, containing two nested columns with a column direction.
The left column contains text, while the right column has two nested flex containers with images or text, positioned at the top and bottom using justify-content: space-around.
My goal is to make the top container in the right column sticky within its parent container, with a 50px offset from the top.
Due to more content in the left column than the right one, there's extra white space between the top and bottom containers in the right column when using justify-content: space-around. I believe making the top container sticky will allow it to move through this space as users scroll down the text on the left.
To better illustrate the layout, here's a rough sketch:
https://i.sstatic.net/I9PKH.png
For the CSS associated with each flex box, here's what I currently have:
1. Outermost Flex Container (Row):
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
height: 100%;
overflow: visible;
2a. First / Left Nested Flex Container (Column)
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 60ch;
padding: 25px;
background: var(--gray_card);
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
2b. Second / Right Nested Flex Container (Column)
flex-direction: column;
justify-content: space-between;
padding: 25px;
3a. First / Top Flex Container
position: -webkit-sticky;
position: sticky;
top: 50px
flex-direction: column;
align-self: center;
justify-content: space-evenly;
margin: 10px 0px;
border: 1px solid lightgray;
border-radius: var(--border_radius);
background: var(--white);
3b. Second / Bottom Flex Container
flex-direction: column;
justify-content: center;
align-content: center;
align-self: center;
border-radius: var(--border_radius);
padding: 35px;
background: var(--gray_card);
4. Flex Container (Row)
align-self: center;
justify-content: space-evenly;
margin: 10px 0px;
border: 1px solid lightgray;
border-radius: var(--border_radius);
background: var(--white);
Despite my efforts and various attempts, including adjusting overflow properties, the position: sticky doesn't seem to work on Flex Container 3a. There might be a flexbox logic issue causing this, but I haven't been able to find a solution yet. Any insights would be greatly appreciated!
Thank you for your assistance!