Is it possible to make the width of elements responsive based on the parent container?

Question

css

for example

<div class="content">
    <div class="child-box"></div>
    <div class="child-box"></div>
    <div class="child-box"></div>
    <div class="child-box"></div>
</div>

Let's say content has a width of 600, respectively, make child-box 150 if there are 4 of them, if 3 then 200 each, and so on? in pure css maybe? Or will you have to calculate and set the width of the child-box elements on js?

Answer 1

Yes it's easy use width: calc(100% / 3);
Well, etc. 3 - the number of blocks in the rows