title: max-width of overflow:scroll element to match flex-grow parent elements width
body: <p>I have a container <code>#container</code> with a fixed width which has three children <code>.item</code>. Each have a flex-basis of 100px but the middle one <code>.item-grow</code> should grow so that all width of <code>#container</code> is used. This works like expected.</p>
  
  <p>The <code>.item-grow</code> element has another children <code>#too-big</code> which could be wider than the available parent's width so its wrapped inside a <code>#scroll</code> container with <code>overflow: scroll</code> and <code>max-width: 100%</code>. </p>
  
  <p>The problem is, that <code>#scroll</code> ignores <code>max-width: 100%</code> and forces the parent <code>.item-grow</code> to grow which foces the container <code>#container</code> to grow.</p>
  
  <p>If I set <code>max-width: 296px</code> instead of <code>max-width: 100%</code> it works but I am looking for a dynamic (and CSS only) solution.</p>
  
  <p>In the embedded code you can find a slider which changes the size of <code>#too-big</code>, you can clearly see that its growing the parents and not using the scrollbars.</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-js lang-js prettyprint-override"><code>function setSize (newValue) {
    let elem = document.getElementById("too-big");
    elem.setAttribute("style",`width:${newValue}px; height:${newValue}px`);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    background-color: red;
    display: flex;
    width: 500px;
    height: 200px;
  }
  
  .item {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;
    border: solid black 1px;
    background-color: gray;
  }
  .item-grow {
    flex-grow: 1;
    align-items: center;
  }
  .center-wrapper {
    margin: auto;
    display: table-cell;
  }
  .scroll {
    overflow: scroll;
    max-width: 100%; /* I want this respect the current parents width */
    /* max-width: 296px; */
    max-height: 100%; /* I want this respect the current parents height */
    /* max-height: 200px; */
  }
  #too-big {
    background-color: green;
    width: 100px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" min=100 max=500 value=100 oninput="setSize(this.value)" onchange="setSize(this.value)"&gt;
  &lt;div id="container"&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
    &lt;div class="item item-grow"&gt;
      &lt;div class="center-wrapper"&gt;
        &lt;div class="scroll"&gt;
          &lt;div id="too-big"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>