Problems when embed an UIStackView in an UIScrollView

Question

I'm setting up an iOS app interface from the Interface Builder. I've several horizontal stack views, all embedded in a single vertical stackview. Up to here, the layout seems to be ok and the constraints are well done.

When I embed the vertical stack view in a UIScrollView, the layout turns very bad. There's probably something wrong with my layout constraints, but I do not really know what. Here are two images that represent the layout before and after the embed in the UIScrollView:

Does anyone have an idea of ​​why this happens? Thanks in advance guys.

Update

After installing this constraint:

VerticalStackView.width == ScrollView.width

The result is the following:

Update 2

Answer 1

Set up the following view hierarchy (screenshot) and constraints and you should be good to go:

• ScrollView.top == View.top
• ScrollView.leading == View.leading
• ScrollView.bottom == View.bottom
• ScrollView.trailing == View.trailing
• ContentView.top == ScrollView.top
• ContentView.leading == ScrollView.leading
• ContentView.bottom == ScrollView.bottom
• ContentView.trailing == ScrollView.trailing
• ContentView.width == ScrollView.width
• VerticalStackView.top == ContentView.top + 16
• VerticalStackView.leading == ContentView.leading + 16
• VerticalStackView.bottom == ContentView.bottom - 16
• VerticalStackView.trailing == ContentView.trailing - 16

Instead of the View within the first four constraints you can also use the SafeAreaLayoutGuide (depending on your needs).