title: Incorrect scrollWidth on child of flex container
body: <p>According to <a href="https://www.w3schools.com/jsref/prop_element_scrollwidth.asp" rel="nofollow noreferrer">w3schools</a>:</p>
  
  <blockquote>
    <p>The <strong>scrollWidth</strong> and <strong>scrollHeight</strong> properties return the entire height and width of an element, including the height and width that is not viewable (because of overflow).</p>
  </blockquote>
  
  <p>If that's the case, why is the <strong>scrollWidth</strong> of an element inside a narrower <em>flex</em> parent reported as the visible portion only?</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>document.body.append("Bar 1 scrollWidth = " + document.getElementById("inner1").scrollWidth);
  document.body.appendChild(document.createElement("br"));
  document.body.append("Bar 2 scrollWidth = " + document.getElementById("inner2").scrollWidth);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    outline: 1px solid grey;
    margin-bottom: 10px;
  }
  
  .outer {
    width: 200px;
    background-color: yellow;
    padding: 3px;
  }
  
  .inner {
    width: 300px;
    position: relative;
    display: inline-block;
    background-color: pink;
  }
  
  #outer2 {
    display: flex;
    background-color: lightgreen;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer" id="outer1"&gt;
    &lt;div class="inner" id="inner1"&gt;Bar 1&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="outer" id="outer2"&gt;
    &lt;div class="inner" id="inner2"&gt;Bar 2&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
   </p>