title: CSS scrolling of container with dynamically sized children
body: <p>I have a container which is populated dynamically with child elements. The width attribute for individual child elements is retrieved from backend in % adding up to 100%. This is because the desired effect is that the childs preserve size proportions in comparison to one another.</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>.wrapper {
    display: flex;
    width: 100%;
  }
  
  .item {
    overflow: hidden;
    height: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="item" style="width: 30%"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
    &lt;div class="item" style="width: 15%"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
    &lt;div class="item" style="width: 5%"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
    &lt;div class="item" style="width: 40%"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
    &lt;div class="item" style="width: 10%"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that there can be an arbitrary number of children and the more of them the more squashed they become. Consequently stopping to fit the content.</p>
  
  <p>Therefore I would like them to have a min-width and be able to scroll the container horizontally while still preserving the proportions retrieved from the database.</p>
  
  <p>I tried:</p>
  
  <ol>
  <li>Setting width on the container to a fixed value e.g. 2000px and overflow-x to auto. The width could be calculated somehow on rendering the page. It makes the childs scale nicely to add up to cover the 100% of the width of the container. The issue is that the scrolling doesn't work, because the container is physically 2000px wide and you have to scroll the whole page rather than the container</li>
  <li>Setting min-width on childs causes the proportions to be lost</li>
  </ol>
  
  <p>So I need a solution that combines both of them but can't seem to figure it out. I would appreciate any help and ideas.</p>