css - Set the width of children to fill the parent -

children/parent issue :

i want children of div fill width.

now using code 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 3 boxes, want - if box count one or two want them fill parent width. want achieve using css.

you can achieve using flexbox properties.

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