UIView added to ScrollView not fitting to full screen with navigation bar at the top

So i am a bit confused with what is going on here. I have a VC with a navigation bar at the top and i need to add a Scroll view to it. So when i did that i stretched it to just below the navigation bar at the top of the screen, then added constraints. (I also made the ScrollView background red so i could differentiate it from the content view)

Secondly i added a UIView which i named Content view and i stretched it to the exact same position as the Scroll view. Then added constraints for that as well. (No objects were added yet)

I then ran the app to check how it looked and i noticed that under the navigation bar my there was a big chunk of red, meaning the Scroll view was full screen in the correct position right below the nav bar, but my content view was not.

A couple things i did to fix this was

I extended the Scroll view all the way to the top of the VC, past the nav bar, but when i ran the app i could see red behind the nav bar, which i figured meant it was not right.

I extended just the content view to the top of the VC, but this did not seem right to me either, even though both seemed to fix the problem.

So my questions are:

When adding views in general to a VC with a nav bar at the top should i be extending those views only to the bottom of the nav bar, or all the way to the top of the VC?

I am new to Scroll views as this is my first time dealing with one, am i missing something in this situation? Or doing something wrong?

Your help is greatly appreciated, thank you.