Div Block Auto Size Not Working

Hi Webflow designers,

I have a small but tricky issue to solve.
I am designing a menu for my site with links to pages. Nothing crazy, the only fancy stuff is the use of a div block to underline the link on hover state. Pretty straight forward and no major issues here.

The only problem I have is about the underline div block size. I want it to follow and adapt to the size of the link to ensure each link is properly underlined. For now, the div block takes the size of the longest link…on each link.

I have created all the links by copy/paste the first item.
What I don’t get is I used the very same method to create my banner link and it worked perfectly. I made the very same designing process…massive fail.

Hope someone could help me on this.

Thanks

Here is the read-only link: https://preview.webflow.com/preview/mooqtrees?utm_medium=preview_link&utm_source=designer&utm_content=mooqtrees&preview=14ff9a7d9985d044edd94179678c1d18&mode=preview

The sizing related to flexbox children behavior (Not to div auto size).

Very simple solution (One style change :slight_smile: )

image

In general try to not use to much flex grids nest inside each other (Harder to debug). Nested flex layout example (old webflow ui):

Thanks mate ! I was pretty sure the solution was simple but when you are deep into your project, you don’t see the obvious…

My complex nested layout will be simplified for sure, thanks for the advice !

2 Likes