Flex height not working in Chrome

Question

To better see the issue run below html code on firefox and on chrome and see the difference.

The code works on all browsers but not Chrome. The issue is when you set display to flex and flex-direction to column, and set one of the flex items flex-grow to 1. The content of this flex item can't have have height set to 100%.

Can you help me with work around without using JavaScript, or css Calc function? Because in the actual project things are much more complex than this.

h1 {
  margin: 0;
  padding: 0;
  color: white;
}

div {
  font-size: 38px;
  color: white;
}

<body style="margin: 0; padding: 0;">
  <div style="height: 100vh; background: royalblue;">
    <div style="display: flex; flex-direction: column; height: 100%;">
      <div style="background: rosybrown; flex-grow: 0;">
        This is first flex item
      </div>
      <div style="flex-grow: 1; background-color: red;">
        <div style="background-color: orange; height: 100%;">
          This div is inside flex item that grows to fill the remaining space. and has css height 100% but its not filling its parent.
          <br/>this div need to be filling its parent (the red div). this works on all other browsers.
        </div>
      </div>
    </div>
  </div>
</body>

This answer may help you (see bullet point #3): http://stackoverflow.com/a/35051529/3597276 — Michael Benjamin, Feb 16 '16 at 19:36
the issue I am showing is not related to flex layout its self. since the flex container and its flex items are working perfectly but the problem is in the content of flex items that has flex-grow set to 1. — Tawfiq abu Halawah, Feb 16 '16 at 19:42
I just read your question again, reviewed your code, and read the text in your demo. The issue seems to be exactly what my answer above suggests. Add `height: 100%` to the parent of the orange div, and it works. — Michael Benjamin, Feb 16 '16 at 19:46
yes I know what you are saying I tested this solution. but as I said if there is a way without using calc or javaScript. since the flex item with flex-grow:0 ; is not fixed height in the actual project. — Tawfiq abu Halawah, Feb 16 '16 at 19:59
There is no `calc` or javascript. Just a pure CSS `height` declaration, which Chrome requires in order to recognize a percentage height on a child. — Michael Benjamin, Feb 16 '16 at 20:00
also in the actual project I cant have scrolling showing on all document. (the browser viewport is not allowed to be scrollable) — Tawfiq abu Halawah, Feb 16 '16 at 20:05

score 6 · Accepted Answer · edited May 23 '17 at 12:17

6

Add height: 100% to the parent of the orange div:

<div style="flex-grow: 1; background-color: red; height: 100%;"><!-- ADJUSTMENT HERE -->
      <div style="background-color: orange; height: 100%;">
             This div is inside flex item that grows to fill the remaining space.
             and has css height 100% but its not filling its parent.
             <br/>this div need to be filling its parent (the red div).
             this works on all other browsers. 
      </div>
</div>

Essentially, Chrome and Safari resolve percentage heights based on the value of the parent's height property. Firefox and IE11/Edge use the parent's computed flex height. For more details see bullet point #3 in this answer: https://stackoverflow.com/a/35051529/3597276

edited May 23 '17 at 12:17

Community

1
1

answered Feb 16 '16 at 19:51

Michael Benjamin

346,931
104
581
701

really thank you for time. this solution is accepted if its ok to have scrolling. in my case its not allowed to have scrolling. and I use height 100% it will set it to 100% of its parent height the total height will be 100%parent + fixed height rows and this case if you run my code with your edit it will have scrolling. – Tawfiq abu Halawah Feb 16 '16 at 20:17
1

I understand. Unfortunately, not all browsers recognize flex height as a reference for children with percentage heights. – Michael Benjamin Feb 16 '16 at 20:22

Flex height not working in Chrome

1 Answers1