Enabling horizontal scroll

Working with horizontal scrolls can be a great way to show a ton of information. It also helps quite a lot when showing information on smaller screens. Unfortunately a lot of people seem to be struggling with getting it just right. Let's dive in!

Copy Remix link

Preview

Growing out of container

Sometimes your content just doesn't fit inside the container. Let's dive in!

Set overflow property

It's very easy to enable scrolling inside Framer. All you need to do is set the overflow property to scroll and make sure the children are larger in width/height then the parent container.

Although, as you can see. It can end up looking weird because not everything should scroll.

Remember this

How to keep the topbar fixed? Easy, just follow the same logic. The container that should scroll should have children that are larger then the container and applied with Scroll overflow. All of the rest should just follow the container sizing.

Fixing the variants

Now you can easily connect your variants to achieve all of the effects.

Finishing up

Furthermore you can now style the component as you'd like on your page. I just wrapped this component inside a frame and added some styling. Making it even smaller now just creates more scroll room instead of problems. Isn't that great?

Table of contents

Final result

Growing out of container

Set overflow property

Remember this

Fixing the variants

Finishing up

Sorry

This is only available on Desktop.