A scroll view is a convenient tool you can use to prevent a keyboard from obscuring contents in your app. Using a scroll view, the user can quickly decide which parts of the interface they would like to see when the keyboard overlays a portion of the view. However, a scroll view is not always trivial to configure. It must know how large its contents are to determine whether scrolling needs to be enabled and to know how far down a user can scroll. Setting this up in Auto Layout requires a little bit of practice.

When you first add the scroll view to your view in Interface Builder, you must make sure that you add constraints that pin the scroll view to the edges of the view controller's view. This makes sure the scroll view takes up the entire available space on the screen. Next, you should add a view to the scroll view. This view will act as a container view for all the content and will be able to inform the scroll view about its content size.

The content view should have a width that is equal to the view controller's view. This will make sure the content width is never larger than the view controller so the scroll view won't scroll on the horizontal axis. Next, the content view should have all its edges pinned to the scroll view edges. Let's go over everything you have read so far again and implement it for the detail page right away. Before you begin, make sure you uncheck Adjust Scroll View Insets in the Attributes Inspector for the entire contact detail view controller.

Now drag a scroll view from the Object Library and add it to the view. Resize it so it covers the entire available view; don't make it cover the navigation bar. Add constraints to the scroll view using the Add New Constraints menu, as shown in the following screenshot:

Note that the Constrain to margins checkbox is checked. By constraining your scroll view relative to the margins of its container, you make sure that your view will not exceed the Safe Area bounds. This is especially important for devices like the iPhone X and Xs, where part of the view is used for the home indicator and the camera notch. The following diagram visualizes the Safe Area bounds on a landscape-oriented iPhone Xs:

The next step is to drag a UIView object from the Object Library and add it to the scroll view. Manually size it so it covers the entire scroll view. Add the same constraints you added to the scroll view, so all edges of the content view are pinned to the edges of the scroll view. The content view must also have an equal width to the view controller's view. To set this up, select the content view and press Ctrl. While holding down Ctrl, drag to the view controller's Safe Area object. When you let go, you can now select Equal Width to make sure the content view always has an equal width to the main view's Safe Area. Doing this will make sure the scroll view knows the correct width for its content.

After following these steps, you should have now encountered an Auto Layout issue. This issue has appeared because the scroll view is unable to determine its height since the content view also cannot determine its height. You could say that the scroll view now has an ambiguous scroll height. Once you add some children to the container view, this problem will resolve itself. Because the container view will be able to calculate its height based on its child views, the scroll view can then use the container view's height to figure out the scroll height.