Set the Width of Children to Fill the Parent

Make child divs expand to fill parent div's width

If you know there will always be three children, you can simply use:

.parent > .child {
    float: left;
    width: 33%;
}

.parent {
    overflow: auto; /*or whatever float wrapping technique you want to use*/
}

If you do not know how many children there are, you will need to use CSS tables, flexbox, or perhaps combine inline-blocks with text-align: justify.

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>

Make one child div expand the parent's width and second child just fill the parent

You need to set min-content on your parent's max-width. This will reduce the maximum width to the smallest word it can fit. Then you set the width of your first child to max-content in order to force the parent to expand to this set width.

.parent {
  max-width: min-content;
}

.child1 {
  width: max-content;
}

<div class="parent">
    <div class="child1">The width should stop here</div>
    <div class="child2">
        <p>Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text Some long text </p>
    </div>
</div>

Auto resize child div to fill available space of parent div

I would leverage the magic of flex!

flex: 0 0 32%; On child1 sets the width to 32%.

flex: 1; to the child2 means: Fill all the available space. So if the child1 disappears, child 2 will fill all the remaining space.

.parent {
  width: 400px;
  height: 200px;
  display: flex;
}

.child1 {
  flex: 0 0 32%;
  background-color: green;
}

.child2 {
  flex: 1;
  background-color: red;
}

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

How can I set child div width equal to to max-width but centered of parent

If you add width: 100% to child you'll get the same width

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

.parent {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px dotted green;
}

.child {
  max-width: 400px;
  width: 100%;
  height: 100px;
  padding: 16px;
  color: white;
  background: red;
}

.expected-width {
  width: 400px;
  text-align: center;
  border: 1px dotted blue;
  margin: 16px 0 0 0;
}

<div class="parent">
  <div class="child">contents</div>
  <div class="expected-width">expected width</div>
</div>

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

TailwindCSS - Set flex child width to fill up whole parent width

You can do it by using flex-1 instead of w-1 and it will take width automatically such as:

const Status = () => {
  return (
    <div className='h-screen bg-gray-800 flex justify-center items-center p-16'>
      <div className='bg-gray-700 px-8 py-4 rounded w-full'>
        <h2 className='text-2xl text-gray-100 font-medium'>Plex Server</h2>
        <h3 className='text-base text-gray-400'>Added 22/10/2021</h3>
        <div className='flex flex-row w-full space-x-1 my-4'>
          {[...Array(30)].map((i, idx) => (
            <div key={idx} className='h-8 flex-1 bg-green-400 rounded'></div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Status;

Here is a working example of it: https://play.tailwindcss.com/rYFniYTQe6

Here is how it will look:

Split divs by width to fill parent div

You're putting some extra " in there - after inline-block. Also take into account that line endings add an extra space, so your containers' total width would be 33% + 33% + 33% + 2 extra spaces.

You might want to try using display: flex;

<style>
.progressPercent {
    color: #000!important;
    background-color: green!important;
    border-radius: 0.5px;
    text-align: right;
    height:100%;
    font-weight: bolder;
}
</style>
<div style="display: flex;">
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>
    <div class="progressPercent" style="flex-basis: calc( 100% / 3 );">33%</div>  
</div>

I'm using calc( 100% / 3 ) as it's more accurate than using 33% tree times, which is 1% short of 100%.

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.

---

Related Topics