Streaming live at 10am (PST)

Problem with In-page linking in Flex


#1

Hi there,

I'm experiencing a problem with in-page linking.
When I assign ID to a section which is inside a flex element, in-page linking does not work. I'm pretty sure that it's because of flex element, since it does work if I change the display setting of the parent element from flex to normal block.

I found someone fixed this problem, but he didn't mentioned how he fixed it.

Anyone knows about it?


#2

Hi! Please, do you mid sharing your site's read-only link?

1 - On your site's dashboard click the Share icon:

2 - Generate or Copy the link:

3 - Then edit your post here and paste it inside.


#3

Hi Vincent,

Thank you for the reply. But I've already changed the structure of my site without using flex container.
I also found that it was not just about flex container, but I think it is related to the height setting : "100VH". - but I'm not sure.
Will post the read-only link to this thread if I encounter a similar problem like this.

Thanks anyway!!


#4

I really wanted to see your site with the link not working, you triggered my curiosity. :slight_smile:

I have targeted elements within flex and it works so it must be something else. I don't see how 100VH would interfere either. There are many other reasons.


#5

Hi Vincent,

I found this problem is because of the combination of settings as below :

  • Height setting = 100vh
  • Overflow setting = scroll

For some reason, I wanted to make Hero height as 100VH and also wanted it to be scrolled when the contents inside is longer than a browser height. As I told you, I already changed the structure differently, so I just made a simple test page as below.

https://preview.webflow.com/preview/in-page-linking-test?preview=e42465d7cf923b6377af79a6d5fc9b7f

Thank you for your help. :slight_smile:


#6

Ok I see.

Technically, this is a bit disputable :wink:

Don't you try to achieve a 100VH MIN HEIGHT on the hero? So that anytime the hero is shorter, it will take the screen height, and if it's taller, then... it will just be taller than the screen height.

Same result but a lot less complex for HTML.


#7