Dynamic width of div elements inside a fixed width div - css

Question

I am dealing with a fixed width parent div that is being used in multiple pages. This div has many(3-5) child div elements inside it. For different pages, the number of child div elements vary, i.e. for page 1, the parent div has 3 child divs, for page 2, the parent div has 5 child divs etc.
How can I set the width of these child elements so that they fully occupy the width of parent div in every page?
P.S. The constraint is to not use SASS/Less and Bootstrap.

Answer 1

Basically you are asking for a table where the width of every cell should be the same in proportion of the fixed width of the parent.
It is possible in CSS if you know the maximum possible number of children (if not you will always use all the space but the width of each cell will change based on the content)
When you know the maximum number if children, you add that property to the class .height: max-width:Npx where N is the width of the parent divided by the number of children
.container {
border:1px solid #000;
border-radius:5px;
width:500px;
display:table;
}
.child{
display:table-cell;
border-right:1px solid #000;
}
.child:last-of-type {
border:none;
}
.height{
min-height:100px;
}
<div class="container height">
<div class="child height">Child 1</div>
<div class="child height">Child 2</div>
<div class="child height">Child 3</div>
<div class="child height">Child 4</div>
<div class="child height">Child 5</div>
</div>

Answer 2

You might want to try flex
.parent {
width: 100%;
background-color: blue;
display: flex;
}
.child {
height: 20px;
background-color: red;
margin: 10px;
display: flex;
width: 100%;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>