Let’s take a look at how to control overflow on Editor X.
You might have elements like images, buttons or text that flow over the borders of the container or section they’re placed in. And there are 3 ways to control how this overflowing content is displayed. We’ll take a look at how to show overflow content, hide it or have it scroll through a container or section.
Here’s how it works.
We can set overflow properties for sections and containers. This section is set to show overflow content, which is the default. So when an element extends outside of the section, we can still see it.
Now, we want these shapes in our design to be cropped off at the top so that it looks like the header is overlapping them a bit. So we’ll drag them slightly outside of the section.
But since the overflow content is set to Show, we can still see the full shapes. Now another thing that affects the design when overflow is set to Show—when we move an element outside the section to the right for example, the overflow creates a horizontal scroll to the section that we don’t want.
So to get that cropped effect we were going for, we’ll set the Overflow content for this section to Hide…and now, you can see all the content that extended beyond this section is no longer shown. Let’s quickly realign this green element.
Now in this next section, we want the final design to have a longer piece of text inside this white container and achieve this effect where we scroll through the text itself without scrolling through the section.
So right now, this container has a bit of text in it. And the container is taking up the entire height of the section, which is set to 70vh.
Like we saw, there’s a lot more text that we need to add to this container.
But now it’s overflowing outside of the container and section.
One way to fix this is by setting the height of the section to auto. That means the section will automatically resize to fit the content inside of it–like this. But now we’ve got this taller section which doesn’t really match the design we’re going for.
So let’s undo that, and instead set the overflow content for this section to Scroll. This creates a scroll within the section–but it also means that all of the elements in the section will scroll, not just the text.
That doesn’t help us much either, so we’ll set the section overflow back to Show.
What we’ll do now is set the Overflow property of the container itself to Scroll. This way, visitors can scroll through the text while the other elements in the section stay in place. We can also choose the scroll direction—vertical, horizontal or both. And we can choose to show or hide the scrollbar.
And because we set this overflow property for the container we’ll make sure it’s stretched, so that it’s the full height of the section.
Now let’s preview the design. We achieved that overlapping look at the top… and in the next section, we can scroll through the text in the container beautifully. And once we reach the bottom of this content, the page starts scrolling again as normal. Same goes when we scroll back to the top.
Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.
