title: How to scroll left on load in overflowed div to specific class name?
body: <p>How to scroll left to element that has class <code>pincard-checked</code>, Below is what I have tried to no effect. Thank you for any help. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="pinGridWrapper"&gt;
  &lt;div class="pinGrid"&gt;
  
  
  &lt;div class="pin"&gt; content &lt;/div&gt;
  &lt;div class="pin"&gt; content &lt;/div&gt;
  &lt;div class="pin pincard-checked"&gt; content &lt;/div&gt;
  &lt;div class="pin"&gt; content &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.pinGridWrapper {
      overflow-x:scroll;
      overflow-y:hidden;
      width:100%;
      padding: 0px;
  }
  
  .pinGrid {
  display:inline-flex;
  list-style: none;
  padding:0px;
  }
  
  .pin {
  width:300px;
  background: #fff;
  margin:0px 10px 0px 10px; 
  position: relative;
  height:525px; 
  margin-top:10px;
  display:inline-block;
   overflow-y:hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
        $('.pinGridWrapper').animate({scrollLeft: $('.pincard-checked').offset().left}, 800);
        return false;
     });   
  </code></pre>
  
  <p><a href="https://jsfiddle.net/hzeLekht/2/" rel="nofollow">FIDDLE</a></p>
  
  <p>UPDATE: I think the issue is with using inline-flex on pinGrid. Just in case anyone has come across this before. </p>