Highcharts: Höhe und Breite in einem Flex-Container

Anscheinend funktioniert der Fix für #1157, der 100% mit für den inneren Container und das SVG hinzufügt, auch für die Flexbox-Breite, aber nicht für die Höhe:

• Flex- Richtung: Reihe behoben

Gibt es in der Zwischenzeit einen Workaround für das Höhenproblem?

Ich hatte Erfolg, indem ich height: 0 auf das übergeordnete Element gesetzt habe, das so etwas wie flex: 1 1 50% , und sicherzustellen, dass der Diagrammcontainer overflow: hidden .

<div id="parent"> // flex-sized, but height 0
  <div id="chart-container"> // flex 1, overflow hidden, display flex
    <div id="chart"> // flex 1, overflow hidden

Und dies scheint (in Chrome) in allen Fällen zu funktionieren. Wirklich knifflig wird es, wenn man Flex und Breite/Höhe mischt, da sie nicht wirklich zusammenarbeiten sollen.

Vielen Dank für Ihre Antwort!!! Es funktionierte :)

Ich habe es auch funktionieren lassen, indem ich height:100% für den "Chart-Container" verwendet habe, der sich unter einem gebogenen Element befand.

Aus irgendeinem Grund funktionierte height:0 bei mir nicht (aber ich musste in einigen Fällen width:0 verwenden, damit das Flex-Layout den untergeordneten Inhalt nicht verwendet).

Beim Testen der App in Chrome (neueste 64.0) trat ein Problem mit der Höhe auf. Der Highchart-Container passt nicht in das übergeordnete Element. Es würde nur überlaufen (nicht wie beim Scrollen, aber größer als der übergeordnete Container). Die Struktur von html kann wie folgt dargestellt werden (.flexed_item ist ein Kind von div mit Anzeige auf flex gesetzt) ​​-

.flexed_item{ Breite: 100%; Höhe: 100%;} -> .chart-container{ width:100%; Höhe:80%} -> .highchart

Das Ding funktionierte gut in Firefox. Aber nicht in Chrom.
Aber wie von @lwhorton kommentiert, habe ich es geändert in ->

.flexed_item{ Höhe: 0; Breite:100%; biegsam: 1 1 100 %; Anzeige: flexibel; } -> .chart-container { flex:1; Anzeige:flex; } -> .highchart

Und jetzt funktioniert es endlich in beiden (Chrom und Firefox).

Ich habe es gelöst mit absolutely positioniert chart-container und einem relatively positionierten Elternteil mit flex-grow: 1 . Und es ist kein Hack erforderlich, daher ist es browserübergreifend kompatibel

<div id="row" style="display:flex">
    <div id="col" style="display:flex; flex-direction: column;">
        <div id="chart-container-outer" style="position:relative; flex-grow:1">
            <div id="chart-container" style="position:absolute; left:0; top: 0; bottom:0; right:0; overflow:hidden"></div>
        </div>
    </div>

    <div id="col sibling" style="display:flex"> // same height
    </div>
</div>

@dabalyan
Vielen Dank für das Teilen Ihrer Lösung.
Die Verwendung des obigen Codes scheint das Problem zu lösen, also schließen Sie das Problem vorerst.
Wenn Sie möchten, dass dieses Problem erneut geöffnet wird, geben Sie bitte weitere Informationen zu dem Fall an.

Hallo @maitrivasa ,
Ich sehe, dass Sie hier auch einen separaten Fall erstellt haben: https://github.com/highcharts/highcharts/issues/13303.

ps. Bitte wiederholen Sie Ihre Kommentare und Themen nicht, weil sie verwirrend sind.

Es tut mir leid. Ich habe meinen Beitrag jetzt entfernt