仅使用CSS将Parent Width设置为Children Total Width？

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

我知道这有点晚了,但希望这会有助于寻找类似解决方案的人:

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

Answer 2

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

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

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

Answer 3

使用

{ width: max-content }

在父节点上应该可以正常工作。这也是一个实验性功能。（我不知道为什么其他人不发布这种方法。）

Answer 4

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