Highcharts: Tinggi dan lebar di dalam wadah fleksibel

Rupanya perbaikan untuk #1157, menambahkan 100% dengan untuk wadah dalam dan SVG, juga berfungsi untuk lebar kotak fleksibel, tetapi tidak tinggi:

• flex- arah: baris tetap

Apakah ada solusi untuk masalah ketinggian sementara itu?

Saya telah berhasil menempatkan height: 0 pada induk yang memiliki sesuatu seperti flex: 1 1 50% , dan memastikan wadah bagan memiliki 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

Dan ini tampaknya berfungsi (di Chrome) dalam semua kasus. Ini menjadi sangat rumit saat mencampur flex dan width/height, karena mereka tidak benar-benar dimaksudkan untuk bekerja bersama.

Terima kasih banyak atas tanggapan Anda!!! Itu berhasil :)

Saya juga membuatnya bekerja dengan menggunakan height:100% pada "wadah bagan", yang berada di bawah item tertekuk.

Untuk beberapa alasan height:0 tidak berfungsi untuk saya (tapi saya harus menggunakan width:0 untuk beberapa kasus sehingga tata letak fleksibel tidak menggunakan konten anak).

Masalah dengan ketinggian muncul saat menguji aplikasi di Chrome (64.0 terbaru). Wadah highchart tidak akan muat di dalam induknya. Itu hanya akan meluap (tidak seperti menggulir tetapi tumbuh lebih besar dari wadah induk). Struktur html dapat direpresentasikan sebagai berikut (.flexed_item adalah anak dari div dengan tampilan diatur ke flex) -

.flexed_item{ lebar: 100%; tinggi: 100%;} -> .chart-container{ lebar:100%; tinggi:80%} -> .highchart

Hal ini bekerja dengan baik di firefox. Tapi tidak di krom.
Tetapi seperti yang dikomentari oleh @lwhorton , saya mengubahnya menjadi ->

.flexed_item{ tinggi: 0; lebar: 100%; fleksibel: 1 1 100%; tampilan: fleksibel; }-> .chart-container { flex:1; tampilan: fleksibel; } -> .highchart

Dan sekarang berfungsi di keduanya ( chrome dan firefox ) akhirnya.

Saya menyelesaikannya menggunakan absolutely positioned chart-container dan relatively positioned parent dengan flex-grow: 1 . Dan tidak ada peretasan yang terlibat sehingga kompatibel lintas-browser

<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
Terima kasih telah berbagi solusi Anda.
Menggunakan kode di atas tampaknya menyelesaikan masalah, jadi tutup masalah untuk saat ini.
Jika Anda ingin melihat masalah ini dibuka kembali, berikan info lebih lanjut tentang kasus ini.

Hai @maitrivasa ,
Saya melihat bahwa Anda juga membuat kasus terpisah di sini: https://github.com/highcharts/highcharts/issues/13303.

hal. tolong jangan menggandakan komentar dan subjek Anda karena membingungkan.

Saya menyesal. Saya telah menghapus posting saya sekarang