Highcharts: Height and width inside a flex container

Created on 11 Oct 2015 · 10Comments · Source: highcharts/highcharts

When there's more than one element inside a flex container, width and height don't shrink when changing window size.
flex-direction:row demo
flex-direction:column demo

Source

antonpodolsky

👍3

Most helpful comment

I've had success putting height: 0 on the parent that has something like flex: 1 1 50%, and making sure the chart-container has 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

And this seems to work (in Chrome) in all cases. It gets really tricky when mixing flex and width/height, since they're not really meant to work together.

lwhorton on 28 Oct 2016

👍10 🎉3 ❤2

All 10 comments

Apparently the fix for #1157, adding a 100% with for the inner container and the SVG, also works for flex box width, but not height:

flex-direction:row fixed

TorsteinHonsi on 13 Oct 2015

👍4

Is there a workaround for the height issue in the meantime?

leilanimng on 25 Oct 2016

I've had success putting height: 0 on the parent that has something like flex: 1 1 50%, and making sure the chart-container has 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

And this seems to work (in Chrome) in all cases. It gets really tricky when mixing flex and width/height, since they're not really meant to work together.

lwhorton on 28 Oct 2016

👍10 🎉3 ❤2

Thanks so much for your response!!! It worked :)

leilanimng on 28 Oct 2016

I also had it working by using height:100% on the "chart-container", which was under a flexed item.

For some reason height:0 did not work for me (but I had to use width:0 for some cases so flex layout does not use the child content).

pedroteixeira on 30 Nov 2016

Issue with the height came across when tested app in Chrome( latest 64.0 ). The highchart container won't fit inside the parent. It would just overflow (not like scrolling but grew bigger than parent container). The structure of html can be represented as follows (.flexed_item is a child of div with display set to flex) -

.flexed_item{ width: 100%; height: 100%;} -> .chart-container{ width:100%; height:80%} -> .highchart

This thing was working fine in firefox. But not in chrome.
But as commented by @lwhorton , I changed it to ->

.flexed_item{ height: 0; width:100%; flex: 1 1 100%; display: flex; }-> .chart-container { flex:1; display:flex; } -> .highchart

And now it is working in both ( chrome and firefox ) finally.

astriskit on 30 Jan 2018

I solved it using absolutely positioned chart-container and a relatively positioned parent with flex-grow: 1. And there's no hack involved so it's cross-browser compatible

<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 on 28 Sep 2018

❤3 👍3

@dabalyan
Thank you for sharing your solution.
Using the above code seems to resolved the problem, so closing the issue for now.
If you would like to see this issue reopened please provide more info about the case.