title: CSS inline gallery / max-width: 100% = Scrollbar does not appear
body: <p>I am trying to create a CSS inline gallery.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;img src="http://placehold.it/500x50" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="http://placehold.it/500x50" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="http://placehold.it/500x50" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="http://placehold.it/500x50" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="http://placehold.it/500x50" alt="" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
    margin: 0;
    padding: 0;
  }
  
  img {
    max-width: 100%;
    border: 0;
    -ms-interpolation-mode: bicubic;
    width: auto\9;
    height: auto;
  }
  
  html,
  body {
      width: 100%;
      height: 100%;
  }
  
  #wrapper {
      width: 100%;
      background: grey;
      text-align: center;
      overflow: scroll;
  }
  
  ul {
      display: table;
      width: 100%;
      height: 50px;
      overflow: hidden;
  }
  
  li {
      display: table-cell;
      width: 100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6fjV9/1/" rel="nofollow">Fiddle</a>  </p>
  
  <p>The problem I am facing is that its not working (d'oh). The idea is to have <code>#wrapper</code> set to <code>width: 100%;</code> and then having the images aligned horizontal in one line inside <code>#wrapper</code>. To navigate between the images, a horizontal scrollbar can be used.</p>
  
  <p>But as you can see, no scrollbar appears, the overflow is simply hidden.<br>
  While debugging I found that the following rule on the <code>img</code> elements causes the problem: <code>max-width: 100%;</code>. If you remove that, the scrollbar appears but the images aren't centered anymore.</p>
  
  <p>As it is a responsive site, I also can't simply remove <code>max-width: 100%;</code>. So basically, I am stuck and don't know that to do. I don't even know why <code>max-width: 100%;</code> messes up the scrolling.  </p>
  
  <p>Can you please help me?</p>
  
  <p>Edit: So in Safari 6.0.2., no scrollbar appears, but in Firefox 19.0.2 everything seems fine. To me things get stranger and stranger.</p>