title: Metro horizontal scrolling container using Javascript
body: <p>Is there a standard way to achieve the horizontal scrolling effect in metro applications using WinJS / javascript ? </p>
  
  <p>Say I have mulitple divs <strong>added dynamically</strong> with variable width/height and I want the screen to scroll horizontally when the content is wider when overflowing, how would I go about to achieve that? </p>
  
  <p>I would prefer not to use overflow-x:scroll with a fixed width on a scroll wrapper</p>
  
  <pre><code>&lt;section class="header"&gt;
      Header which is always shown in top left corner
  &lt;/section&gt;
  &lt;section class="magic-winjs-scroll-container-class"&gt;
     &lt;div style="width:300px;height:200px"&gt;Some random div which should stack horizontally&lt;/div&gt;
     &lt;div style="width:300px;height:200px"&gt;Some random div which should stack horizontally&lt;/div&gt;
     &lt;div style="width:300px;height:200px"&gt;Some random div which should stack horizontally&lt;/div&gt;
     &lt;div style="width:300px;height:200px"&gt;Some random div which should stack horizontally&lt;/div&gt;
     &lt;div style="width:300px;height:200px"&gt;Some random div which should stack horizontally&lt;/div&gt;
     &lt;div style="width:300px;height:200px"&gt;Some random div which should stack horizontally&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>Solution:</strong></p>
  
  <p><em><strong>CSS</em></strong></p>
  
  <pre><code>.magic-winjs-scroll-container-class {
       display: -ms-flexbox;
       -ms-flex-direction: row;
       -ms-flex-align: center;
   }
  </code></pre>