Non-fullscreen sections overflow handling

Question

The problem

I am creating a website with non-fullscreen-sections at the moment:

I am using a fullscreen-library to "switch" between the section when the user is scrolling. That way the sections will always be centered vertically on the screen (there also will be a possibility to deactivate this and scroll normally).

The problem now is the following: It might occur that the content for one section is too high for the section.

Possible solutions

There are two possible solutions for this problem:

1. Make the section scrollable
2. Don't fix the height of the section so it can adjust to its content

Both solution have disadvantages:

Solution (1): It might not be clear for every user that they have to scroll the section and not the whole page to see more content.

Solution (2): This is better from an UX-perspective in my opinion but it probably won't be as good as Solution 1 from an UI-perspective.

Question

Are there better solutions to this problem than the solutions I have thought about? If not, which solution is better and why?

Answer 1

The scroll is ok when is needed.

How is relevant the fact the sections are not full-width? Your question is if you should use a scroll or not? If you have just a few lines of text, the scroll is not even needed and if you have a long text and the window width is small, the scroll is necessary, you don't have other options...

So basically your only issue is if the modal/ section should have a fixed/ flexible width depending on the length content. Considering what I said before, a scroll may be needed anyway, so keep a normal UI, with the modal width not depending on content (fixed-width or percent of the window width), but you can make it responsive, of course.

Also, that section seems a modal, but your explanations suggest is a page so keeping the content displayed without scroll is not so important, and more, navigating between pages with different can look strange and it is a lack of consistency.