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 ?

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

are those `child` elements horizontally aligned or are they stacked? — Fabrizio Calderan loves trees, Dec 09 '14 at 15:35

score 39 · Accepted Answer · answered Jan 05 '17 at 02:43

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>

thanks it works great! I need it only for chrome therefore didn't test anywhere else — Krzysztof Sztompka, Jul 21 '17 at 19:42
Thanks it worked for me with `flex-direction:column`, but as you said `inline-flex` is the trick for this. — Sabo, Apr 09 '18 at 12:28
amazing, this works as a direct replacement for display: flex in my case — Alexander Ivanov, Jun 04 '18 at 10:32

Pranav · Answer 2 · 2020-06-25T01:54:40.020

14

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)

edited Jun 25 '20 at 01:54

answered Sep 08 '18 at 06:27

Pranav

446
5
7

1

With a vendor prefix for Firefox, the situation looks [really good](https://caniuse.com/#feat=mdn-css_properties_width_fit-content) by now: `max-width: fit-content`, `max-width: -moz-fit-content` – Kaspar Etter Jun 18 '20 at 13:22
This should be added to the parent div right? it's not working for me though! @Pranav – Akhila Jan 01 '21 at 11:43
For me `width: fix-content` worked. – ViniciusArruda Apr 09 '21 at 15:18
For me min-width: fit-content; worked – m b k May 10 '21 at 08:54

score 9 · Answer 3 · answered Dec 09 '14 at 15:44

9

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

answered Dec 09 '14 at 15:44

Paulie_D

95,305
9
106
134

1

The trick here is to set `display: inline-block` to the parent too, not only the children. Worked for me, so I upvoted to cancel out a downvote :-) – Just a student Jul 01 '16 at 07:51

score 0 · Answer 4 · answered May 26 '21 at 03:50

0

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

you can try this

answered May 26 '21 at 03:50

Nguyễn Dương

39
3

If you us * you set this property for all elements....it's not correct – Sfili_81 May 26 '21 at 06:32

Manjunatha N · Answer 5 · 2019-03-28T11:16:45.347

-1

.parent{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.child {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1; 
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>

</div>

edited Mar 28 '19 at 11:16

answered Mar 28 '19 at 11:13

Manjunatha N

7
2

Please provide some explanations with your cod as well. – Partho63 Mar 28 '19 at 11:16

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

5 Answers5