title: Align divs horizontally in container with a scrollbar
body: <p>I am trying to align a few div elements next to each other inside a container div. The container should have a horizontal scrollbar.</p>
  
  <p><a href="https://i.stack.imgur.com/nH91A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nH91A.png" alt="enter image description here"></a></p>
  
  <p>I have tried different solutions, but each of them has different problems. Please note that I am looking for a "generic" solution.
  This means it should work with</p>
  
  <ul>
  <li>any container height</li>
  <li>any number of children (which can differ in width)</li>
  </ul>
  
  <p>1.</p>
  
  <pre><code>display: inline-block; 
  </code></pre>
  
  <p>Problem: divs are not aligned properly when they don't have "similar" content.</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/k08m6y6e/" rel="nofollow noreferrer">https://jsfiddle.net/k08m6y6e/</a></p>
  
  <p>2.</p>
  
  <pre><code>float: left;
  </code></pre>
  
  <p>Problem: Boxes wrap - no scrollbar</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/k08m6y6e/1/" rel="nofollow noreferrer">https://jsfiddle.net/k08m6y6e/1/</a></p>
  
  <p>3.</p>
  
  <pre><code>display: table-cell; 
  </code></pre>
  
  <p>Problem: no scrollbars - this actually makes sense to me, but it means this will not solve my problem</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/k08m6y6e/5/" rel="nofollow noreferrer">https://jsfiddle.net/k08m6y6e/5/</a></p>
  
  <ol start="4">
  <li>flexbox; 
  Problem: min-width of children are ignored plus seems to be inconsistent across browsers (especially IE)</li>
  </ol>
  
  <p>Can anybody help me to come up with a good solution?</p>
  
  <p>--</p>
  
  <h2>SOLUTION</h2>
  
  <p>Both answers provided here (from Michael and Andrei) work pretty well; thank you very much. Sadly I can only accept one. </p>
  
  <p>Small note: Internet Explorer seems to have a problem with both solutions. The scrollbar is overlaying the content of the children and/or a small part of the bottom of the children is cut off. Chrome and Firefox work as expected.</p>