I’m working on my first full stack project, it’s a simple web mapping application that I share places my dog has been. The design has two main components: the sidebar and the map. The sidebar is a flex container with three items: a header, content section, footer. I have it set so that the footer stays in position at the bottom of the container by setting the top margin to auto. When you adjust the screen size so it overflows, it should stay at the bottom and you can scroll the sidebar. Now for some reason on safari this does not work, it starts moving over my content section and the controls I have for the images and videos will get out of alignment in their respective containers. You can find the application at https://finnmaps.org . Alot of the content is controlled by javascript so I’m not going to share any code here, but you can inspect and see everything.

It works fine in all other browsers, just safari is giving me an issue (it’s always safari lol). Could anyone help me figure out why this is happening?

See these screenshots:

r/webdev - Flex items in overflow container not behaving as expected in safari, can anyone help me figure out the cause?

On firefox, note that the container is overflowed but the structure maintains it’s integrity.

r/webdev - Flex items in overflow container not behaving as expected in safari, can anyone help me figure out the cause?

On safari, note that the footer comes up over the content



Source link

Write A Comment