ScrollView does not show content beyond the initially visible screen in iOS

Question

I’m working on a UI layout with a ScrollView and a ContentView inside it. When the app is launched, the ContentView displays only the content that fits on the screen initially. However, when I try to scroll further, the content beyond the initially visible area is not appearing.

Here are the details:

The last element of the screen is a Bottom Outer View, which contains a button (Button 2) that is the final element in the layout. I have added constraints for the ScrollView, ContentView, and Bottom Outer View, but the scrolling does not work as expected. Current setup:

ScrollView is constrained to the Safe Area: Top: Navigation View bottom Leading, Trailing: Safe Area Bottom: Safe Area bottom ContentView is constrained to ScrollView: Top, Leading, Trailing, Bottom Width: Equal to ScrollView.width Bottom Outer View is part of the ContentView and is the last element. It should define the bottom of the ContentView: However, I might have missed properly linking Bottom Outer View's bottom to ContentView.bottom. Problem:

When scrolling, the content after the initially visible screen (e.g., Bottom Outer View and Button 2) does not appear. The ContentView does not seem to expand dynamically to fit the content height. Question:

What is the correct way to set up constraints so that the ScrollView shows all the content when scrolling, including the last element (Bottom Outer View with Button 2)? Is there anything specific I need to do to ensure that the ContentView properly calculates its height and scrolls as expected?

In the simulator, the green zone is Outer UIView, Grey zone is a ContentView

Here is how the simulator shows:

Here are my constraints:

Answer 1

To control what can be scrolled and by how much, we constrain the scrollview's subview(s) to the Content Layout Guide.

To help with width sizing (assuming we only want vertical scrolling), we constrain the width of the subview(s) to the scrollview's Frame Layout Guide.

Suppose we've designed this gray "Content View" with various subviews:

and setup the constraints like this:

At the moment, the gray "Content View" is centered, and has no width or height constraints -- because its subviews determine those.

Now, we want to use a scroll view that is shorter than the "Content View":

and we want to fit the "Content View" width to the scroll view width.

We can embed the "Content View" in a scroll view, constrain the scroll view to the main view (and maybe to other subviews), and then constrain Top / Leading / Trailing / Bottom to the Content Layout Guide, and constrain the Width to the Frame Layout Guide:

Now, when we run the app, we get this output:

and we can scroll vertically: