Установить родительскую ширину, равную числу детей Общая ширина, используя только CSS?

Question

Я не знаю, сколько .child элементов .parent будет содержать, но я знаю их индивидуальную ширину.

Я хочу, чтобы установить ширину .parent равным (ширина каждого .child) * (общее количество .child)

Я не хочу использовать floats и width: auto;

Может Я что-то делаю с calc() без использования Javascript?

** CSS: **

.parent { 
    height: 100%; 
    width: calc({number of children} * {width of each child = 100px}); 
} 

.child { 
    height: 100px; 
    width: 100px; 
} 

HTML:

<div class="parent"> 
    <div class="child"> 
    <div class="child"> 
    <div class="child"> 
</div> 

Answer 1

* { 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing:border-box; 
 
    } 
 

 
.parent { 
 
    height: 100%; 
 
    display:inline-block; 
 
    background:#bada55; 
 
    font-size:0; /* clear whitespace*/ 
 
} 
 

 
.child { 
 
    height: 100px; 
 
    width: 100px; 
 
    border:1px solid red; 
 
    display:inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 2

Я знаю, что это немного поздно, но надеюсь, что это поможет кто ищет аналогичное решение:

<div class="parent" style="display: inline-flex"> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
     </div> 

хитрость заключается в том, чтобы использовать inline-flex для parent и inline-table для child. Все динамично. Я делаю таблицу прокручивать по горизонтали, добавив еще один grandparent с overflow-x:scroll;:

<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray"> 
     <div class="parent" style="display: inline-flex"> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
      <div class="child" style="display: inline-table">some button</div> 
     </div> 
    </div>