Set Parent Width equal to Children Total Width using only CSS?

Question

I don't know how many .child elements .parent will contain but I know their individual width.

I want to set the width of .parent to be equal to (width of each .child) * (total number of .child)

I don't want to use floats and width: auto.

Can I do something with calc() without using 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

I know this is a bit late, but Hope this will help somebody who is looking for similar solution:

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

the trick is to use inline-flex for the parent and inline-table for the child. Everything is dynamic. I make the table scrollable horizontally by adding another grandparent with 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

If you're on Chrome, you can use max-width: fit-content

It's not yet supported by other major browsers though.

UPDATE: As Kasper pointed out in the comments, most browsers now do support max-width: fit-content (albeit with a vendor prefix in the case of Firefox)

Answer 3

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

use

{ width: max-content }

on parent node should works fine. It's also an experimental feature. (I don't know why others do not post this approach. )

Answer 5

You can simply set display: inline-block; to the .parent element for its width to be equal to the total width taken by its .child elements.

.parent {
    display: inline-block;
}

Whichever elements in HTML come with display: block; by default, will occupy the full width of their parent element. In your case, the .parent element, because of having display: block; is taking up the full width of its parent. So, by setting display: inline-block; for the .parent element will make its width become equal to its contents which in this case is the total width taken by its .child elements.

Answer 6

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

you can try this