¿Cómo evitar escalar #chart mientras se escala .container?
Quiero escalar todo el contenido (.container) excepto un div (#chart) mientras el usuario cambia el tamaño de la ventana del navegador. A este div, he importado un gráfico de apexcharts.js y no funciona correctamente debido a la escala de este elemento. Así que quiero omitir escalar este div en particular para que quepa en todo el espacio libre (es un gráfico receptivo). No tengo ni idea de cómo hacer esto...
window.addEventListener('resize', () => resizeWindow()); const resizeWindow = () => { const {innerWidth: width, innerHeight: height} = window; if(width < 768) { const scale = height/PANEL_HEIGHT; document.documentElement.style.setProperty(SCALE_PROPERTY, scale); return; } else { const scale = Math.min(width/PANEL_WIDTH, height/PANEL_HEIGHT); document.documentElement.style.setProperty(SCALE_PROPERTY, scale); } } :root { --scale-value: 1; } .panel { height: 1000px; width: 1600px; position: absolute; transform: scale(calc(var(--scale-value) * 0.9)); transform-origin: center; } <div class="container"> <div id="chart"></div> </div>