title: horizontal scrollable list fully centered with dynamic width items
body: <p>I'm trying to make an horizontal list to be centered, with its items to be centered too regarding the main parent (the window, or body) ; and because i don't know what kind and how many items i will have generated into that list, i'd need the items to be dynamic in width and the list scrollable so i can browse over all of them.</p>
  
  <p>My attempts so far are good, i'm getting either : a centered list with non-centered items of dynamic width ; and a fully centered scrollable list with fixed width items.</p>
  
  <p>The core idea is basically achieved by using:</p>
  
  <pre><code>ul {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
  
  li {
    display: inline-block;
  }
  </code></pre>
  
  <p>Then the centering is made by wrapping the <code>&lt;ul&gt;</code> into a <code>&lt;div&gt;</code>, and making the <code>&lt;div&gt;</code> scroll the <code>&lt;ul&gt;</code> instead of the <code>&lt;ul&gt;</code> scrolling the <code>&lt;li&gt;</code>. It allows to add % based margins to the <code>&lt;ul&gt;</code></p>
  
  <pre><code>div {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
  }
  
  ul {
    margin: 0 50%;
  }
  
  li {
    display: inline-block;
  }
  </code></pre>
  
  <p>For items to be centered by width, the idea is to use <code>translateX(-50%)</code> with a little twist: as i don't want my list to have extra space at the end of the scrolling, I'm removing the last item from the flow by positioning it in absolute at the end ; that way, the <code>&lt;ul&gt;</code> width looks like the sum of the items width minus one item.</p>
  
  <pre><code>ul {
    position: relative;
    margin: 0 50%;
  }
  
  li {
    display: inline-block;
    width: some_number;
    transform: translateX(-50%);
  }
  
  li:last-child {
    position: absolute;
    left: 100%;
  }
  </code></pre>
  
  <p><strong>But how to keep it that way without setting the width is a mystery to me.<br>
  Any ideas out there ?</strong></p>
  
  <p>Here's my fiddle with some comments in the CSS section : <a href="https://jsfiddle.net/11gkrju0/" rel="nofollow">https://jsfiddle.net/11gkrju0/</a></p>
  
  <p>I'd like <em>not</em> to use javascript at all for that as it is only a matter of styling, but messing with the dom is a totally viable option.</p>
  
  <p>Thanks all for reading,</p>