title: Set Parent Width equal to Children Total Width using only CSS?
body: <p>I don't know how many <code>.child</code> elements <code>.parent</code> will contain but I know their individual width.</p>
  <p>I want to set the width of <code>.parent</code> to be equal to (width of each <code>.child</code>) <strong>*</strong> (total number of <code>.child</code>)</p>
  <p>I don't want to use <code>floats</code> and <code>width: auto</code>.</p>
  <p>Can I do something with <code>calc()</code> without using Javascript?</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> .parent {
        height: 100%;
        width: calc({number of children} * {width of each child = 100px});
      }
      
      .child {
        height: 100px;
        width: 100px;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="parent"&gt;
        &lt;div class="child"&gt;a&lt;/div&gt;
        &lt;div class="child"&gt;b&lt;/div&gt;
        &lt;div class="child"&gt;c&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>