How to set up autolayout constraints for vertical Stack View in Scroll View

Question

I have the following setup, which I can't get properly to work with auto-layout:

Scroll View, which should take the whole screen
 |_ Stack View, which should take the whole size of the Scroll View
     |_ View 1 with a predefined height of 200
     |_ View 2 with a flexible height defined by content, but minimum 300
     |_ View 3 with a predefined  height of 500

I tried the following yet:

1. Scroll View
   • Set top, bottom, leading and trailing alignment to superview
2. Stack View
   • Set top, bottom, leading and trailing alignment to superview (Scroll View)
   • Set equal width to superview (Scroll View)
   • Set equal height to superview (Scroll View) with priority 250
3. The 3 Views inside Stack View
   • Define height = 200 for View1 and height = 500 for View3
   • Define height >= 300 for View2

And I get:

• an error in IB: Inequality Constraint Ambiguity for the View2
• if I launch and scroll I get additional spacing at the top and the bottom (see the red areas on the top and bottom in the simulator screenshots)

Please see the screenshots:

Answer 1

Change the top, bottom, leading and trailing alignment to SafeArea

Because content view always inside the SafeArea.