2

I have (yet another) position: sticky / display: flex conundrum to add to the pile.

A section of a webpage I'm working on has a standard flex box layout: a single outermost flex container set to flex-direction: row in which I've nested two flex containers set to flex-direction: column.

The first/left nested column contains a bunch of text.

The second/right nested column contains two additional nested flex containers with images and/or text, and I've used justify-content: space-around to "push" these nested containers to the top and bottom of the second column.

What I'm trying to do is to set the second/right column's first/top flex container to position: sticky such that it sticks to the top of the second/right column (its parent flex container) at top: 50px.

Because there is significantly more content in first/left column than the second/right column, setting justify-content: space-around on the second/right column creates a good amount of white space between the second/right column's nested first/top and second/bottom flex containers. My thinking here is that setting the second/right column's first/top flex-container to position: sticky will allow the first/top flex container to "traverse" this white space as a user reading the text in the left-hand column scrolls down.

I realize that's a bit difficult to visualize using text alone, so here's a rough sketch of the layout:

Visualization of Nested Flex Containers

In terms of the CSS associated with each flex box, here's what I'm currently using:

1. Outmoster 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);

I suspect the reason position: sticky isn't working on Flex Container 3a has something to do with the logic of flexbox, but after hacking away at this all morning, and after consulting similar Stack Overflow posts, I'm afraid I'm stumped. Nothing I've tried (including setting overflow: visible on parent items all the way up to the main, body, & html elements) seems to work.

Hopefully someone here will see something I've missed, as I also suspect there's an easy fix to this I simply don't know.

Many thanks in advance for taking the time!

iamthelabhras
  • 351
  • 2
  • 12
  • 1
    Did you try adding a wrapper div inside 3a, so that it includes all the content you want to be sticky, and making that sticky? – Ant May 23 '21 at 18:54
  • 1
    I did, Ant, and unfortunately that didn't work. That said, I'm just now realizing the page I'm troubleshooting loads three separate CSS style sheets in its `head`...and that I've only examined/attempted to tweak the CSS found in *one* of three style sheets. Going over the other two style sheets now, very much expecting to feel that unique combination of embarrassment & relief that comes with debugging your own code! – iamthelabhras May 23 '21 at 20:01

1 Answers1

4

UPDATE: Found the problem.

It turns out the the main element on this page was set to overflow: hidden...on another Sass partial further down in the page's head element. This second Sass partial was overwriting the changes I was making to the main element further up in the head. Duh.

I applied an #id to the main element, used that #id to set overflow: visible in my page-specific stylesheet and everything worked just fine.

A rookie mistake, but one I'm happy to have publicly made if reminds other devs that, when all else fails, check the order in which your CSS is being loaded into the browser.

If, like me, you're loading your base styles & resets after page-specific CSS, it pays to do a quick search for overflow: hidden in those files if display: flex & position: sticky aren't playing well with one another.

If that doesn't work, then it's probably time to explore some of the other solutions mentioned elsewhere on Stack Overflow, such as this post.

Although the solution in my case ended up being a simple oversight on my part, the fact remains the way display: flex & position: sticky interact is a CSS gotcha all devs will encounter at one point or another.

iamthelabhras
  • 351
  • 2
  • 12