CODEWITHSUNDEEP
htmlcss
user2272048
user2272048

Reputation:

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

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>

Upvotes: 56

Views: 134975

Answers (7)

Liu CZ
Liu CZ

Reputation: 310

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

Upvotes: 11

arafatgazi
arafatgazi

Reputation: 429

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.

Upvotes: 3

Nguyễn Dương
Nguyễn Dương

Reputation: 263

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

you can try this

Upvotes: 1

Pranav
Pranav

Reputation: 686

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)

Upvotes: 35

Manjunatha N
Manjunatha N

Reputation: 7

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

Upvotes: -1

sooon
sooon

Reputation: 4888

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>

Upvotes: 53

Paulie_D
Paulie_D

Reputation: 115351

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

Upvotes: 11

Related Questions