Tengo un div padre con varios divs hijos. Actualmente, los divs secundarios están espaciados alrededor del div principal para que se ajusten al div principal por igual y funciona bien, pero lo que estoy tratando de lograr es que cuando se agregan más divs secundarios, la altura de los divs principales aumenta en tamaño pero la altura de los divs secundarios Sigue igual. ¿Cómo puedo conseguir esto? Lo que hace actualmente cuando agrega más divisiones secundarias es que la altura de los padres permanece igual, pero la altura de las divisiones secundarias se acortará para adaptarse a la división principal, pero lo que quiero es al revés. Cuando se agrega más div secundario, quiero que el div principal aumente en altura, como si el div principal tuviera una altura automática. ¿Cómo puedo conseguir esto? Cualquier ayuda es apreciada. Gracias por adelantado.
.items { display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: absolute; top: 6%; left: 15%; width: 70%; height: 60%; background-color: gold; } .data { width: 100%; height: 35%; background-color: #187bcd; border-top: 2px solid #000000; } <div class="items"> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> </div>Puede aplicar una unidad de longitud no relativa a los padres (como em y px) para hacerlo, si eso es lo que desea:
.items { display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: absolute; top: 6%; left: 15%; width: 70%; background-color: gold; } .data { width: 100%; height: 2em; background-color: #187bcd; border-top: 2px solid #000000; } <div class="items"> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> <div class="data"> </div> </div>Simplemente elimine el % de altura de su div .items, luego establezca una altura fija en sus elementos secundarios.
<button>Add div</button> <div class="items"> <div class="data"></div> <div class="data"></div> </div> <style> .items { display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: absolute; top: 6%; left: 15%; width: 70%; background-color: gold; } .data { width: 100%; height: 75px; /* Fixed height here */ background-color: #187bcd; border-top: 2px solid #000000; } </style> <script> const button = document.querySelector('button'); const div = document.querySelector('div.items'); button.addEventListener('click', () => { const newDiv = document.createElement('div'); newDiv.className = 'data'; div.appendChild(newDiv); }); </script>min-height: (menor o igual a la altura del elemento secundario)