How to prevent scaling #chart while scaling .container?
I want to scale all content (.container) except one div (#chart) while the user resizes the browser window. To this div, I have imported a chart from apexcharts.js and it isn't working properly because of scaling this element. So I want to omit to scale this particular div to fit in all the free space (it is a responsive chart). I have no idea how to do this...
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>