title: css not calculating width correctly when children have percent assigned
body: <p>This is another css weirdness..</p>
  
  <p>Inline-block container will calculate width correctly when using px,vw,em etc. But not when using % measure.</p>
  
  <p><strong>percent :</strong>
  <a href="https://i.stack.imgur.com/saI0M.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/saI0M.jpg" alt="percent"></a>
  <strong>pixels ( correct ) :</strong>
  <a href="https://i.stack.imgur.com/MCWey.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MCWey.jpg" alt="pixels ( correct )"></a></p>
  
  <p>HTML</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>    .clip{
        width: 100%; overflow:hidden;
        position:relative;
      }
      .show-width-con{
        min-width: 100%; 
        display:inline-block;
        white-space:nowrap;
      }
      .element-perc{
        width:24%;
        display:inline-block;
        vertical-align: top;
        position: relative;
      }
      
      .element-px{
        
        width:300px;
        display:inline-block;
        vertical-align: top;
        position: relative;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="clip"&gt;
        &lt;div class="show-width-con"&gt;
          &lt;div class="element-perc"&gt;25%&lt;/div&gt;
          &lt;div class="element-perc"&gt;25%&lt;/div&gt;
          &lt;div class="element-perc"&gt;25%&lt;/div&gt;
          &lt;div class="element-perc"&gt;25%&lt;/div&gt;
          &lt;div class="element-perc"&gt;25%&lt;/div&gt;
          &lt;div class="element-perc"&gt;25%&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;br&gt;&lt;br&gt;
      
      &lt;div class="clip"&gt;
        &lt;div class="show-width-con"&gt;
          &lt;div class="element-px"&gt;300px&lt;/div&gt;
          &lt;div class="element-px"&gt;300px&lt;/div&gt;
          &lt;div class="element-px"&gt;300px&lt;/div&gt;
          &lt;div class="element-px"&gt;300px&lt;/div&gt;
          &lt;div class="element-px"&gt;300px&lt;/div&gt;
          &lt;div class="element-px"&gt;300px&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the pen is <a href="https://codepen.io/digitalzoomstudio/pen/BYWEoG" rel="nofollow noreferrer">https://codepen.io/digitalzoomstudio/pen/BYWEoG</a></p>