title: align flexbox items vertically and keep same width
body: <p>I have the following flexbox where I'm trying to align items vertically and keep the same width for each column. </p>
  
  <p>let's say I have 10 items in a row but inside container should be visible just 4 items the rest are hidden by overflow. All this items are splitted to the same width in function of the width of parent container</p>
  
  <p>It does not seems to work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 100%;
  }
  .container .slider {
    position: relative;
    overflow: hidden;
    margin: auto;
    padding: auto;
  }
  .container .slider[data-columns="1"] ul {
    width: 100%;
  }
  .container .slider[data-columns="1"] ul li {
    width: 100%;
  }
  .container .slider[data-columns="2"] ul {
    width: 200%;
  }
  .container .slider[data-columns="2"] ul li {
    width: 50%;
  }
  .container .slider[data-columns="3"] ul {
    width: 300%;
  }
  .container .slider[data-columns="3"] ul li {
    width: 33.33333%;
  }
  .container .slider[data-columns="4"] ul {
    width: 400%;
  }
  .container .slider[data-columns="4"] ul li {
    width: 25%;
  }
  .container .slider[data-columns="5"] ul {
    width: 500%;
  }
  .container .slider[data-columns="5"] ul li {
    width: 20%;
  }
  .container .slider[data-columns="6"] ul {
    width: 600%;
  }
  .container .slider[data-columns="6"] ul li {
    width: 16.66667%;
  }
  .container .slider[data-columns="7"] ul {
    width: 700%;
  }
  .container .slider[data-columns="7"] ul li {
    width: 14.28571%;
  }
  .container .slider[data-columns="8"] ul {
    width: 800%;
  }
  .container .slider[data-columns="8"] ul li {
    width: 12.5%;
  }
  .container .slider[data-columns="9"] ul {
    width: 900%;
  }
  .container .slider[data-columns="9"] ul li {
    width: 11.11111%;
  }
  .container .slider[data-columns="10"] ul {
    width: 1000%;
  }
  .container .slider[data-columns="10"] ul li {
    width: 10%;
  }
  .container .slider ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .container .slider ul li {
    height: 200px;
    list-style: none;
  }
  .container .slider ul li:nth-child(odd) {
    background-color: #34495e;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="slider" data-columns ="4"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;  
  &lt;/div&gt;   </code></pre>
  </div>
  </div>
  </p>
  
  <p>What am I missing in my code?</p>
  
  <p>Codepen demonstration here: <a href="http://s.codepen.io/deroccha/debug/GqvvEm" rel="nofollow">http://s.codepen.io/deroccha/debug/GqvvEm</a></p>