I have a parent div with multiple child divs. Currently, the child divs are spaced around the parent div in order to fit the parent div equally and it works fine but what I'm trying to achieve is when more child divs are added the parent divs height increases in size but the child divs height stays the same. How can I achieve this? What it currently does when you add more child divs is the parent height stays the same but the child divs height will get shorter in order to fit the parent div but what I want is the other way around. When more child div is added I want the parent div to increase in height kinda like the parent div having a height of auto. How can I achieve this? Any help is appreciated. Thanks in advance.
.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>You can apply a non-parentally-relative length unit (like em and px) to do that, if that's what you want:
.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>Just remove the % height from your .items div, then set a fixed height on your child elems.
<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: (less than or equals the height of the child element)