Why does 'flex-grow' behave differently in Chrome and Firefox/Edge?

Question

I'm trying to make a web page with a 'header' div of fixed height then a 'content' div below it. Within that content div are several different divs with actual page content in them. In the actual project, the height of all of these elements may vary between different screens and users as their content is mostly generated by PHP.

Sorry if that explanation is unclear, but the following demonstrates what I have got so far: https://codepen.io/anon/pen/ZJPgWm (the code is poorly formatted and some of the values look a bit wierd because I've just thrown this together quickly as an imitation of my actual project).

#main {
    width: 90%;
    min-width: 400px;
    max-width: 1200px;
    height: calc(100vh - 10px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#head {
    background-color: blue;
    font-size: 3vh;
}

#content {
    background-color: red;
    flex-grow: 1;
    display: flex;
}

#left {
    width: calc(16% - 6px);
    float: left;
    background-color: green;
}

#inner {
    font-size: 10vh;
    flex-grow: 1;
    width: calc(84% - 6px);
    float: left;
    margin-left: 8px;
    margin-bottom: 10px;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: yellow;
}

<body>
  <div id="main">
    <div id="head">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="content">
      <div id="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div id="inner">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div
    </div>
  </div>
</body>

On chrome, a scroll bar is shown within the #inner div. This is what I want. On firefox and MS Edge, the overflowing content of the #inner div is just cut off, so it is impossible to see that content (without a taller screen). I should note that the reason for this seems to be that, in chrome, the #inner and #content divs have their height controlled such that their bounding boxes don't go outside the boundary of the #main div. However, in firefox, their bounding boxes extend to below the bottom of the page (shown by developer tools).

What I am looking for is a method which will make all browsers give the result which is currently given by chrome. Ideally, an explanation of which browser is 'correct' and why they are different would also be helpful.

Note that I want to avoid using JS if at all possible. Any help or advice is appreciated.

Asons · Accepted Answer · 2017-09-05T10:17:47.863

Flex item's has a min-height that defaults to auto, which means it doesn't shrink below its content's size, so when you nest them like this and put the overflow: auto on a flex item's child, you need to let it know it is allowed to shrink.

Add min-height: 0; to your content rule and they will behave similar.

#main {
  width: 90%;
  min-width: 935px;
    max-width: 1600px;
    height: calc(100vh - 90px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#head {
  background-color: blue;
  font-size: 20px;
}

#content {
  background-color: red;
  flex-grow: 1;
  display: flex;
  min-height: 0;
}

#inner {
  font-size: 60px;
  flex-grow: 1;
  overflow-y: auto;
}

<body>
  <header>
  </header>
  <div id="main">
    <div id="head">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="content">
      <div id="inner">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div </div>
    </div>
</body>

Why does 'flex-grow' behave differently in Chrome and Firefox/Edge?

1 Answers1