title: Creating Horizontal Scroll and Wrapping Elements
body: <p>I have a horizontal scroll that I'm building but the divs end up wrapping to the next line instead of going off screen. In essence I'm trying to create this.</p>
  
  <p><a href="http://codepen.io/calendee/pen/HIuft?editors=100" rel="nofollow">http://codepen.io/calendee/pen/HIuft?editors=100</a></p>
  
  <p>My CSS looks like</p>
  
  <pre><code>.wide-as-needed {
    white-space: nowrap;
    overflow: scroll;
  }
  
  .scroll {
    min-width: 100%;
  }
  
  parts * {
    width: 100px;
  }
  
  parts {
    display: inline;
    float: left;
    margin-right: 20px;
  }
  </code></pre>
  
  <p>My HTML looks like</p>
  
  <pre><code>&lt;ion-scroll class="wide-as-needed" direction="x"&gt;
      &lt;parts ng-repeat="part in popularParts" part="part"&lt;/parts&gt;
  &lt;/ion-scroll&gt;
  </code></pre>
  
  <p>The parts element sample here</p>
  
  <pre><code>&lt;parts ng-repeat="part in popularParts" part="part" class=""&gt;
      &lt;div class="text-center"&gt;
          &lt;img src="image.png"&gt;
          &lt;div class="bold assertive ng-binding"&gt;Product 1&lt;/div&gt;
          &lt;div class="assertive ng-binding"&gt;John Deere&lt;/div&gt;
          &lt;div class="bold balanced ng-binding"&gt;$88.0&lt;/div&gt;
      &lt;/div&gt;
  &lt;/parts&gt;
  </code></pre>
  
  <p>What's wrong and how do I fix this?</p>