Streaming live at 10am (PST)

A fixed element inside a flex box


#1

Hello,

if i have 2 elements inside a flexbox how can i have one that is fixed and the other that is just scrolling ?


#2

Can you be more precise about this behavior? Fixed regarding what and scrolling regarding what? Flexbox sets a flow of elements inside of a box, it’s antinomic with Fixed.


#3

something similar to the map on the right


#4

Here the container of the grid and the map shouldn’t be flexbox.

There’s a first section with the navbar and the top, that is fixed, then a section (a simple div with no class and styling) containing grid and map.

Grid and map are both divs, one at 66% width one at 33% width (map). The one with the map isn’t even fixed, it just has a height that’s 100vh minus the offset of the pixels taken by the upper elements. (it uses CSS calc : height: calc(100vh - 144px) . So it doesn’t scroll because it’s just absolute.

There are other ways to put big columns like that side by side.


#5

i tried what you said to me but it is not working and still scrolling. any other way?


#6

if you’re sharing your read-only link maybe others can try to make it work.


#7

here is the link check it out. i need to find a way to fix the map while scrolling

https://preview.webflow.com/preview/yasminas-first-project-70117a?utm_source=yasminas-first-project-70117a&preview=25d29dba78a15ef791a3be8258477042


#8

On what page ?



#9

venues to fix press on the div next to " show map" and the div that contains the map will appear


#10

It’s not the same than your example, you need the map to stop and actually sticks. This can be done with IX2 but you can also use custom code and the CSS sticky property.


#11

any step by step help?