Height and width inside a flex container

[antonpodolsky]

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

[TorsteinHonsi]

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

[leilanimng]

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

[lwhorton]

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.

[leilanimng]

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

[pedroteixeira]

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).

[astriskit]

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.

[dabalyan]

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>

[KacperMadej]

@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.

[sebastianbochan]

Hi @maitrivasa,
I see that you created also a separate case here: #13303.

ps. please do not duplicate your comments and subjects because of confusing.

[maitrivasa]

I am sorry. I have removed my post now