Ich versuche, ein Highchart in einen Flexbox-Container zu legen. Das Diagramm wächst mit dem Container gut, aber es schrumpft nicht, wenn der Container schrumpft.
Mein Projekt verwendet angularJS und highcharts-ng, obwohl ich vermute, dass das Problem bei flexbox selbst liegt. Es ist das gleiche in Chrome und IE mindestens.
Hier ist ein Plunkr , der das Problem veranschaulicht. Wenn Sie die eingebettete Ansicht öffnen, werden Sie bemerken, wenn Sie das Fenster breiter machen, dass beide Diagramme wieder passen. Aber wenn du es schmaler machst, bleibt das oberste Diagramm (in einer Flexbox) unverändert.
Ich habe die Reflow-Schaltfläche eingefügt, um das Reflow-Ereignis für highcharts-ng zu übertragen, aber es scheint keine Wirkung zu haben.
Ich suche nach einer Problemumgehung oder irgendeiner Lösung, die mir Flexbox noch erlauben wird.
Unten ist der Code von Plunkr. Es basiert auf einem anderen Plunk des Autors von highcharts-ng, das ein ähnliches Problem für Bootstrap-Container löste.
index.html
%Vor%style.css
%Vor%app.js
%Vor% Sie können entweder eine nicht-relative Breite oder flex-basis für den Container .main-panel , damit Highcharts die Dimensionen des übergeordneten Elements ermitteln können.
Ich habe auch das width: 100% auf .highcharts-container entfernt, da es nichts getan hat.
Der ursprüngliche Plunkr funktioniert auf Safari 9.0.1, was auf Unterschiede bei der Implementierung der Flexbox-Spezifikation durch den Browser zurückzuführen sein könnte (zB ) Problem mit Breite / Höhe: 100% )
Tags und Links angularjs css highcharts flexbox highcharts-ng