Chart.js в flex-элементе переполняется вместо сжатия

Question

Я попытался установить для min-width значение 0 в div-обертке для chart.js, но диаграмма будет расти, а затем не уменьшаться, если вы перетаскиваете окно.

Я не могуразберись!Единственное, что я могу сделать, это установить ширину на 99%, но тогда диаграмма больше не будет выровнена с другими моими элементами.Я работал над этим в течение нескольких дней, пожалуйста, помогите!

В: Как я могу получить chart.js, чтобы иметь ширину 100% и увеличивать / уменьшать его до ограничивающего размера.

для воспроизведения, перейдите к примеру, и если вы закроете меню, диаграмма увеличится, и если вы откроете ее, диаграмма не уменьшится вниз.он сохраняет свой размер и переполняется вправо.

note : мой настоящий проект имеет два отдельных компонента для диаграммы и боковой панели.Таким образом, решение для калькуляции в этом случае не работает, я не хочу тесно связывать какие-либо компоненты для поддержания хорошей практики.

Вот мой рабочий пример StackBlitz

вот изображения, показывающие репродукцию:

1. диаграмма правильного размера, меню открыто

2. график увеличивается при закрытии меню (размер по-прежнему правильный)

3. открывается меню, и график переполняется вправо

Answer 1

(Скопировано из моего комментария .)

Мне не удается запустить StackBlitz (ошибки JS из-за защиты от отслеживания в Firefox), поэтому я не могу проверить это, но яУ меня была именно эта проблема в моем макете Flex, и она была решена путем обеспечения установки overflow: hidden для родительских (и предковых) элементов Flex.Беглый взгляд на ваш CSS показывает, что это делается только на .page-wrapper.

Answer 2

Здесь ваш холст имеет ширину внутри абсолютных родителей, поэтому рекомендуется динамически изменять значения с помощью JavaScript (в вашем случае углового).Но так как вы ищете решение на основе CSS, вот что вы можете добавить в свой файл app.components.css:

.sidebar-wrapper.shrink + div.main-wrapper canvas {
  width: calc(100vw - 40px) !important;
}
.sidebar-wrapper:not(.shrink) + div.main-wrapper canvas {
  width: calc(100vw - 230px) !important;
}

Вот рабочий пример: https://chartjs -overflow-ex-vlsqmn.stackblitz.io/