title: Scroll to element in flexbox container
body: <p>I am trying to autoscroll to an element in a flexbox container.</p>
  
  <pre><code>&lt;div class="nav"&gt;
    &lt;div class="items"&gt;
      &lt;div ng-repeat="i in items"  scroll-on-click&gt;
        {{i}} click me to scroll to me!
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  app.directive('scrollOnClick', function() {
    return {
      restrict: 'A',
      link: function(scope, $element) {
        $element.on('click', function() {
          $(".items").animate({scrollTop: $element.offset().top}, "slow");
        });
      }
    }
  });
  </code></pre>
  
  <p>It scrolls to the top of the first item clicked, but after that it has a hard time scrolling.  I have had something very similar in a non-flexbox container working.</p>
  
  <p>Here is a plunk:</p>
  
  <p><a href="http://plnkr.co/edit/kq40NiTqBI81KlRJBLHu?p=preview" rel="nofollow">http://plnkr.co/edit/kq40NiTqBI81KlRJBLHu?p=preview</a></p>
  
  <p>Any ideas?</p>