title: UIView animated changes with auto layout constraints
body: <p>Say that I have a project which looks like the following:</p>
  
  <p><img src="https://i.stack.imgur.com/WHvS5.png" alt="enter image description here"></p>
  
  <p>There are two <code>UIView</code>s - one called <code>yellowBox</code> and the other called <code>redBox</code>. The auto layout constraints dictate that the <code>yellowBox</code> is 60 points from the top of the superview with 350 points leading and trailing spaces (i.e. to left and right of the view). The <code>redBox</code> has the same leading and trailing space constraints. There is a vertical space constraint between the two boxes of 0 to indicate that the bottom of the <code>yellowBox</code> should always be directly on top of the <code>redBox</code>.</p>
  
  <p>When the user taps the Expand Yellow Box button, I would like the height of the <code>yellowBox</code> to increase and, as a result, the <code>redBox</code> moves down to continue satisfying the vertical space constraint (that the <code>yellowBox</code> is always on top of the <code>redBox</code>). Here is the animation code:</p>
  
  <pre><code>- (IBAction)expandYellowBox:(id)sender {
  
      [UIView animateWithDuration:0.5
                       animations:^{
                           CGRect newFrame = self.yellowBox.frame;
                           newFrame.size.height += 50;
                           self.yellowBox.frame = newFrame;
                       }];
  
  }
  </code></pre>
  
  <p>However, I have been unable to get this working properly. As you can see by the red icon, there is a problem with the constraints at the moment:</p>
  
  <p><img src="https://i.stack.imgur.com/JKFiv.png" alt="enter image description here"></p>
  
  <p>which is fair enough, as there's no way for auto layout to know the height of the boxes. However, I don't know how to resolve this issue in such a way that it will allow for the boxes to be resized and moved. For example, if I specify a height constraint on the <code>yellowBox</code> then that will prevent it from being resized. If I set the height constraint to be <em>greater than or equal</em> (to allow the <code>yellowBox</code> height to increase) then I get a different constraint error:</p>
  
  <p><img src="https://i.stack.imgur.com/JsjWm.png" alt="enter image description here"> </p>
  
  <p>All constraints have been established using Xcode in the storyboard - none have been written in code.</p>
  
  <p>Any help greatly appreciated.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> As it turns out, the <code>yellowBox</code> is growing when the button is clicked - it's just I couldn't tell because it appears behind the <code>redBox</code>. I only noticed after clicking it around four times and it started appearing out the bottom of the <code>redBox</code>. However, the same question still remains - how to get the <code>redBox</code> to always stick to the bottom of the <code>yellowBox</code>.</p>