Set the width of children to fill the parent

Question

I want the children of the div fill its width.

now am using a code like this:

.parent {
  width: 100%;
  display: inline-block;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-block;
  margin-left: 1%;
  width: 31.4%;
  height: 100px;
  background: #ddd;
}

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

and it's working for 3 boxes, but what I want is that - Even if the box count is one or two i want them to fill the parent width. I want to achieve this using only CSS.

Answer 1

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>

Answer 2

You can make the parent a flexbox and define for the children to grow when there is space available. I removed the width for .child.

.parent {
  width: 100%;
  display: inline-flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-block;
  margin-left: 1%;
  height: 100px;
  background: #ddd;
  flex-grow: 1;
}

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

Answer 3

Use flexbox:

.parent {
  width: 100%;
  display: flex;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.child {
  flex: 1;
  margin: 0 10px;
  height: 100px;
  background: #ddd;
}

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

Answer 4

You are using width like 30% which is fixed for every element, so every time you create other element its size is fixed and added at the end of residing elements and after total width is more than that of parent container it overflows.

Instead use flex-box.

.parent {
  width: 100%;
  display:flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  flex:1;
  margin-left: 1%;
  width: 31.4%;
  height: 100px;
  background: #ddd;
}

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

</div>

Answer 5

You can use flexbox to achieve this.

The demo below shows how it works with more child nodes and also with nodes with zero height.

I have also changed the margin property for the child items to work properly with flexbox.

.parent {
  width: 100%;
  display: inline-flex; /*used inline-flex here, to mirrior your inline-block setting, but you can use flex*/
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {
  display: inline-flex;
  flex-grow: 1;
  margin: 0 1%;
  height: 100px;
  background: #ddd;
}

/*demontration for zero-height child elements*/
.child:nth-child(2) {
  height: 0;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <!-- remove these to test with different child count --->
  <div class="child"></div>
  <div class="child"></div>
</div>

Answer 6

here is the code below , i think this may help for you

	.parent {
  
  display: -webkit-flex; /* Safari */
  display: flex;
  height: 120px;
  background: #000;
  padding: 10px;
  box-sizing: border-box;
}

.child {

  -webkit-flex: 1;  /* Safari 6.1+ */
  -ms-flex: 1;  /* IE 10 */    
  flex: 1;
  margin-left: 1%;
  background: #ddd;
}

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

Answer 7

If its for a fixed number of child then you can always calculate the width of child by (parent-width / No. of child) and fix that width to child. But if your code has dynamic child the you can use flex property of display. Just add display:flex to your .parent and flex:1 to your .child.

However this has few issues with browser compatibility and is not advisable if you are targeting old browsers. Even there are few cases of elements which does not support flex property.Refer to this link for information. I would suggest write a javascript code for calculating the width of child and add the property.Else its good to go with flex! Hope this helped you! You can study more about flexbox here.