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

Question

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

我想将 .parent 的宽度设置为等于（每个 .child 的宽度） * （ .child 的总数）

我不想使用 floats 和 width: auto 。

我可以在不使用 Javascript 的情况下使用 calc() 做些什么吗？

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

原文由 Kawd 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

诀窍是使用 inline-flex inline-table parent 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>

原文由 sooon 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您使用的是 Chrome，则可以使用 max-width: fit-content

但其他主要浏览器 尚不支持 它。

更新： 正如 Kasper 在 评论 中指出的那样，大多数浏览器 现在都支持 max-width: fit-content （尽管在 Firefox 的情况下带有供应商前缀）

原文由 Pranav 发布，翻译遵循 CC BY-SA 4.0 许可协议