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

我不知道将包含多少

.child

元素

.parent

，但我知道它们各自的宽度

我想将

.parent

的宽度设置为等于（每个

.child

的宽度）*（

.child

的总数）

我不想使用

浮动

和

宽度：自动

我是否可以在不使用Javascript的情况下使用
calc（）
执行某些操作

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



*{
保证金：0；
填充：0；
框大小：边框框；
}
.家长{
身高：100%；
显示：内联块；
背景：#bada55；
字体大小：0；/*清除空白*/
}
.孩子{
高度：100px；
宽度：100px；
边框：1px纯红；
显示：内联块；
}
我知道这有点晚，但希望这能帮助寻找类似解决方案的人：

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

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

不过，其他主流浏览器也在使用它

更新：
正如Kasper在文章中指出的那样，大多数浏览器
max-width:fit-content
（尽管在Firefox中有供应商前缀）
{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.孩子{
-ms flex首选尺寸：0；
弹性基准：0；
-webkit-box-flex:1；
-ms-flex阳性1例；
柔性生长：1；
最大宽度：100%；
}
1.
2.
3.
4.
5.
6.

您可以试试这个
您只需设置
显示：内联块到
.parent
元素，使其宽度等于其
.child
元素的总宽度

.parent {
    display: inline-block;
}

无论HTML中的哪个元素随
display:block一起出现将占据其父元素的全部宽度。在您的例子中，
.parent
元素，因为有
display:block占用其父级的全部宽度。因此，通过设置
display:inline块.parent
元素，code>将使其宽度等于其内容，在这种情况下，即其
.child
元素的总宽度。
是否使用
显示：flex
选项？这些
child
元素是水平对齐的还是堆叠的？子项放在一旁。。。并排？
display:inline block
可以做到这一点。这里的技巧是将
display:inline block
也设置为父级，而不仅仅是子级。为我工作，所以我向上投票取消了向下投票：-）谢谢，它工作得很好！我只在chrome上需要它，因此没有在任何地方测试过它，因为它在
flex direction:column
上对我有效，但正如你所说的
inline flex
是实现这一点的诀窍。令人惊讶的是，它可以直接替代display:flex。在我的案例中，请提供一些关于您的cod的解释。对于Firefox，有一个供应商前缀，目前的情况如下：
max-width:fit-content
，
max-width:-moz-fit-content
应该将其添加到父div，对吗？但这对我不起作用@PranavFor me
宽度：固定内容
有效。For me最小宽度：适合内容；workedIf you us*您为所有元素设置了此属性……这是不正确的
.parent {
    display: inline-block;
}

* {
      flex-grow: 1;
      flex-basis: 0;
      width: fit-content;
  }

.parent {
    display: inline-block;
}