tengo este div:
<div class="middle"></div>Se llena con datos API diariamente y todos los días cambia su altura.
Tengo estos otros divs:
<div id="right" class="sideScoreDiv"></div> <div id="left" class="sideScoreDiv"></div>Quiero que estos div sean iguales a la altura del div medio, ¿cómo haría esto? He intentado establecer las alturas al 100% pero no me ha funcionado. También probé otras formas sugeridas, como ocultar los desbordamientos, pero no pude encontrar nada en los divs creados dinámicamente.
Una buena solución a este problema es el diseño de cuadrícula. Por ejemplo, en el siguiente fragmento, los elementos se insertan en el primer hijo del padre y la altura del segundo div cambia para coincidir.
<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>