Child Take Width % from Parents Parent

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.

Cross browser method to fit a child div to its parent's width

The solution is to simply not declare width: 100%.

The default is width: auto, which for block-level elements (such as div), will take the "full space" available anyway (different to how width: 100% does it).

See: http://jsfiddle.net/U7PhY/2/

Just in case it's not already clear from my answer: just don't set a width on the child div.

You might instead be interested in box-sizing: border-box.

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 CSS width to fill parent?

EDIT:

Those three different elements all have different rendering rules.

So for:

table#bar you need to set the width to 100% otherwise it will be only be as wide as it determines it needs to be. However, if the table rows total width is greater than the width of bar it will expand to its needed width. IF i recall you can counteract this by setting display: block !important; though its been awhile since ive had to fix that. (im sure someone will correct me if im wrong).

textarea#bar i beleive is a block level element so it will follow the rules the same as the div. The only caveat here is that textarea take an attributes of cols and rows which are measured in character columns. If this is specified on the element it will override the width specified by the css.

input#bar is an inline element, so by default you cant assign it width. However the similar to textarea's cols attribute, it has a size attribute on the element that can determine width. That said, you can always specifiy a width by using display: block; in your css for it. Then it will follow the same rendering rules as the div.

td#foo will be rendered as a table-cell which has some craziness to it. Bottom line here is that for your purposes its going to act just like div#foo as far as restricting the width of its contents. The only issue here is going to be potential unwrappable text in the column somewhere which would make it ignore your width setting. Also all cells in the column are going to get the width of the widest cell.

Thats the default behavior of block level element - ie. if width is auto (the default) then it will be 100% of the inner width of the containing element. so in essence:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

will give you exactly what you want.

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.

Set child width relative to its parents height in pure css

Just assign your parent's height property value to a css variable and then use calc() to assign your child element's width to a value that is 10% of your parent's height.

Check and run the Code Snippet below for a practical example of what I have described above:

.parent {
   position: relative;
   --parentHeight: 300px;
   height: var(--parentHeight);
   width: 600px;
   background-color: red;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: calc(var(--parentHeight) / 10);
   background-color: green;
 }

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

Grow parent to width of the child

Using width: fit-content on the .container element would allow it to expand outside of the window bounds when necessary.

.container {
  display: block;
  background-color: blue;
  width: fit-content;
}

.grid {
  min-width: 1000px;
  display: grid;
  padding: 10px;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  
  margin-left: auto;
  margin-right: auto;
  align-items: start;
}

.grid > div { 
  background-color: yellow;
}

<div class="container">
  <div class="grid">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
  </div>
</div>

CSS grow child to parent's max width

I found a way to do it, fill-available.

.sidebarElement {
    width: 100vw;
    ...
    max-width: fill-available;
    max-width: stretch;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
}

Once this is done, the min-width on #sidebarArea can be removed.

* {
    margin: 0;
    box-sizing: border-box;
}

html,body {
    width: 100%;
    height: 100%;
}

#container {
    height: 100%;
    display: flex;
    flex-direction: row;
}
#contentArea {
    width: 100%;
    background: #A84652;
}
#sidebarArea {
    max-width: 25%;
    background: #4262C2;
}
.sidebarElement {
    width: 100vw;
    padding: 12px;
    background: #8b8b8b;
    border-bottom: 1px solid #2c2c2c;

    max-width: fill-available;
    max-width: stretch;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
}

<body>
    <div id="container">
        <div id="contentArea">

        </div>
        <div id="sidebarArea">
            <div class="sidebarElementWrapper">
                <div class="sidebarElement">Sidebar Element 1</div>
            </div>
            <div class="sidebarElementWrapper">
                <div class="sidebarElement">Sidebar Element 2</div>
            </div>
        </div>
    </div>
</body>