Как изменить размер диаграммы при увеличении? Высота изменения размера очень хорошо, но ширина остается слишком широкой ⇐ CSS

[Anonymous]

У меня есть проблема с тем, что компонент плохо размер, и он испортил много других вещей. В частности, это происходит, когда у меня есть компонент HighCharts, который виден в качестве дочернего компонента, который, кажется, все испортит. Вот поведение, которое я вижу < /p>
при увеличении, диаграмма изменяется правильно < /p>
При масштабировании высота изменяется, но ширина нет. Вместо этого ширина остается слишком широкой и выходит из экрана, внедряя контейнер с ним, несмотря на то, что все они устанавливаются на 100%. Кроме того, иногда, когда я увеличиваюсь (не все время), он медленно изменяется с течением времени.

{mainContent}

className={cx(styles.rightSidebar, {
[styles.collapsed]: !isOpen,
[styles.isResizing]: isResizing.current
})}
style={{ width: `${isOpen ? width : 0}px` }}
>

setIsOpen(false)}>


{sidebarContent}


< /code>
Этот класс здесь добавляет правую боковую панель, которая без графика работает отлично, но когда график там, он вообще не изменяется правильно! Если я добавлю переполнение: скрыто к Детскому Div, то это вроде как работает, но немного лакий, и без открытой боковой панели она все еще имеет предыдущее поведение. Увеличение (или вкладку «Осмотр влево»), в результате чего он отрезан (обратите внимание на текст HighCharts в правом нижнем углу). < /p>
Некоторые вещи я попробовал < /p>
Встроенные стили для 100%< /p>

{ chartRef.current = chart; }}
containerProps={{ style: { height: '100%', width: '100%' } }}
/>

< /code>
прослушивание событий < /p>
const { width, height, ref } = useResizeDetector({
onResize: () => {
if (chartRef.current) {
chartRef.current.setSize(width, height);
}
},
refreshMode: 'debounce',
refreshRate: 100,
});

useEffect(() => {
const handleWindowResize = () => {
if (chartRef.current) {
chartRef.current.reflow();
}
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
}, []);
< /code>
Скрыто переполнен и все на 100% ширина /высота безрезультатно. Любая помощь будет очень признателен в том, чтобы сделать Highcharts более отзывчивыми на это!

Подробнее здесь: https://stackoverflow.com/questions/795 ... -the-width