I have this div:
<div class="middle"></div>
It's filled with API data daily and every day its height changes.
I have these other divs:
<div id="right" class="sideScoreDiv"></div>
<div id="left" class="sideScoreDiv"></div>
I want to these this div equal to the height of the middle div, how would I do this? I have tried setting the heights to 100% but that hasn't worked for me. I have also tried other suggested ways like hiding overflows but could not find anything on dynamically created divs.
A nice solution to this problem is the grid layout. For example, in the following snippet, elements are inserted into the first child of parent, and the second div's height changes to match.
<div class="parent-container">
<div id="left">
left
</div>
<div id="content">
<!-- for example, fill it with a list -->
<!-- this data can be anything though -->
<ul></ul>
</div>
<div id="right">
right
</div>
</div>
<style>
.parent-container {
background-color: rebeccapurple;
display: grid;
/* adjust these columns to change widths */
grid-template-columns: 10rem auto 10rem;
}
/* just to make things look a bit nicer */
#left, #right {
padding: 1rem;
background-color: paleturquoise;
}
</style>
<!-- script to simulate dynamic data -->
<script>
setInterval(() => {
const parent = document.querySelector('ul');
const entry = document.createElement('li');
entry.innerText = 'data';
parent.appendChild(entry);
}, 1000);
</script>