title: How do you set constraints for scrollview that doesn't occupy the whole parent view
body: <p>I'm trying to build UI similar to that of ios photo gallery : Navigation view controller with a scrollview occupying 80% height and 100% width of the parent's view and the collection view controller occupying the rest of the height and 100% width. So here's how it looks like :</p>
  
  <p><a href="https://i.stack.imgur.com/5fthn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5fthn.png" alt="enter image description here"></a></p>
  
  <p>The blue area is scrollview and its content view. The bottom part is a collection view which suppose to behave like a carousel. You can see the constraints that I have set in the following screenshot :</p>
  
  <p><a href="https://i.stack.imgur.com/kZDbu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kZDbu.png" alt="enter image description here"></a> :</p>
  
  <p>I want to set the scrollview height so that it only occupies 80% of the parent view estate and the collection view occupies the rest. However, I can't seem to resolve scrollview constraint issues such as autolayout not able to resolve height/y position of scrollview. As you can see in the above pic, I tried setting the height of the scrollview to 50% of the parent view but the autolayout still complains about not being able to resolve height. If I let interface builder resolve the issue, it just adds spacing to the content view inside scrollview and pushes it down as a result. You can see that in the following screenshots.</p>
  
  <p><a href="https://i.stack.imgur.com/oANfF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oANfF.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/m3mFC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m3mFC.png" alt="enter image description here"></a></p>