html - 仅使用 CSS 将父宽度设置为等于子总宽度？

Question

我不知道有多少.child元素 .parent将包含但我知道它们各自的宽度。

我想设置.parent的宽度等于(每个 .child 的宽度)*(.child 的总数)

我不想使用 floats和 width: auto .

我可以用 calc() 做些什么吗？不使用 Javascript？

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

    <div class="parent">
      <div class="child">a</div>
      <div class="child">b</div>
      <div class="child">c</div>
    </div>

Answer 1

我知道这有点晚了，但希望这对正在寻找类似解决方案的人有所帮助:

<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>

诀窍是为parent 使用inline-flex，为child 使用inline-table。一切都是动态的。我通过使用 overflow-x:scroll; 添加另一个 grandparent 来使表格水平滚动:

<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>