How to Make Children Auto Fit Parent's Width Only with CSS

How to make children auto fit parent's width only with CSS?

This is already a pretty old question. Although the answers given attended well at the time, nowadays the Flexible Box Layout offers the same result with much more simplicity, with good support in all modern browsers. I strongly recommend it!

/* Important parts */.parent {  display: flex;}
.parent a {  flex: 1;}
/* Decoration */.parent {  padding: 8px;  border: 1px solid #ccc;  background: #ededed;}
.parent a {  line-height: 26px;  text-align: center;  text-decoration: none;  border: 1px solid #ccc;  background: #dbdbdb;  color: #111;}

<div class="parent">  <a href="#">Some</a>  <a href="#">Other</a>  <a href="#">Any</a></div>
<br>
<div class="parent">  <a href="#">Some</a>  <a href="#">Other</a>  <a href="#">Any</a>  <a href="#">One More</a>  <a href="#">Last</a></div>

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

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>

How to make a parent div auto size to the width of its children divs

Your interior <div> elements should likely both be float:left. Divs size to 100% the size of their container width automatically. Try using display:inline-block instead of width:auto on the container div. Or possibly float:left the container and also apply overflow:auto. Depends on what you're after exactly.

Set the width of children to fill the parent

You can achieve this using flexbox properties.

Here is a demo:

.parent {  display: flex;  height: 120px;  background: #000;  padding: 10px;  box-sizing: border-box;}
.child {  height: 100px;  background: #ddd;  flex: 1;  margin: 0 10px;}

<div class="parent">  <div class="child"></div>  <div class="child"></div>  <div class="child"></div></div>
<div class="parent">  <div class="child"></div>  <div class="child"></div></div>
<div class="parent">  <div class="child"></div></div>

CSS: how to make children fit parent's width

Added css:

#component>div{height:100%;}
#component>div:first-of-type{border-radius:30px 0 0 30px;}
#component>div:last-of-type{border-radius: 30px;}

Edit in js:

$('#component').children().not(':last').each(function () {

What happens:

The last div will not float left, and will just fill the space that is left.
I added rounded corners to the first and last div to fix the corner issue. the last div has a 30px radius in every corner, because the div is actualy behind the other divs (you can see this with inspect element)

Demo:

http://jsfiddle.net/tqVUy/48/

Parents width auto and child with fixed width

EDIT: Make the .parent an inline-block with min-width: 100% so it grows to fit the browser, but also will not shrink to smaller than its content

.parent {  background: #555;  display: inline-block;  min-width: 100%;}
.child {  width: 1000px;  color: red;  font-size: 50px;}

<div class="parent">  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quas aut reiciendis quaerat, possimus, quidem veniam et sequi ullam labore obcaecati iure alias iusto atque explicabo facere, aperiam nobis quam.</div></div>

Expanding a parent <div> to the height of its children

Try this for the parent, it worked for me.

overflow:auto; 

UPDATE:

One more solution that worked:

Parent:

display: table;

Child:

display: table-row;

How can I make the child div to have the same width as the parent div?

Your css for middle-box uses max-width, which allows the content to expand up to a certain maximum, but will shrink the width to fit the content until that maximum is reached. You want width: 100%; like you tried before.

If middle-box still doesn't reach the edges of the parent main element, then use the margin: 0; and padding: 0; as needed.

I recommend using the element selector in Chrome dev tools. You can select or mouse-over the .main and .middle-box elements and Chrome dev tools will display the margin and padding for each element. Then you know where your issue is coming from. Other browsers have similar functionality.

---

Related Topics