Можно ли сделать ширину элементов адаптивной исходя из родительского контейнера?

Question

[lolka02]

Например

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

Допустим у content ширина 600, соответственно child-box сделать по 150 если 4 их, если 3 то по 200 и тд? на чистом css возможно? или на js придется считать и на нем же задавать уже ширину элементов child-box?

Comments

[Bartf]

Важно использовать именно js? Задавать ширину в % и использовать flex не вариант?

[Степан Крапивин]

на чистом js возможно?

поставь вопросу тег Javascript, что-ли...

[lolka02]

Степан Крапивин, упс извиняюсь, на css. На js знаю как делать

[lolka02]

Bartf, да на css инетерсует , но у дочерных нельзя задавать фиксированную ширину

[Степан Крапивин]

я правильно понимаю: нужно чтобы все .child-box умещались в один ряд сколько бы их ни было и делили между собой всю ширину .content?

[lolka02]

Степан Крапивин, именно

[Степан Крапивин]

lolka02, тогда используй флексы, как написал Bartf в самом первом комментарии. Блоки внутри поделят пространство поровну, какой бы ширины не был .content

[lolka02]

Степан Крапивин, что то не получилось у меня

Answer 1

[wendem]

Да это легко используй width: calc(100% / 3);
Ну и т.д 3 - число блоков в рядх

Comments

[wendem]

.child-box {
width: calc(100% / 3);
}

[lolka02]

wendem, вы прочитали внимательно что я написал? нам неизвестна цифра 3. она может быть сколько угодной

[wendem]

lolka02, ну у вас же не будет 100 элементов строку ?? есть ограничения!

[wendem]

lolka02, вам всёравно нужно знать количество элементов максимальное

[lolka02]

wendem, а вот и никто не знает возможно и будет 100, вобщем флексом решил

[wendem]

lolka02, и как же вы решили ?