Динамическая ширина элементов div внутри фиксированной ширины div

Question

Я имею дело с родительским div с фиксированной шириной, который используется на нескольких страницах. Этот div имеет много (3-5) дочерних элементов div внутри него. Для разных страниц число дочерних элементов div изменяется, то есть для страницы 1, родительский div имеет 3 дочерних div, для страницы 2 родительский div имеет 5 дочерних div и т. Д.

Как установить ширину этих дочерние элементы, чтобы они полностью занимали ширину родительского div на каждой странице?

P.S. Ограничение - не использовать SASS/Less и Bootstrap.

Answer 1

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

Это возможно в CSS, если вы знаете максимально возможное количество детей (если не всегда будет использовать все пространство, но ширина каждой ячейки будет изменяться в зависимости от содержания)

Когда вы знаете, максимум число, если дети, то добавить, что свойство к классу .height: max-width:Npx где N является width родителя, деленное на число детей

.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

Вы могли бы хотеть попробовать 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>