Firefox flex - How to prevent flex items from growing too tall with flex-direction: column

Question

I have been working on flex layout and have run into an issue against Firefox and IE11.

I have created a codepen to show to show the issue.

Screenshot

Chrome(left), Firefox(right)

Description

The expected behavior is header and footer are always visible to user, and Content area uses overflow-y: auto to scroll its innerContent if needed. The problem is Firefox and Internet Explorer allow content area to grow as tall as its innerContent, rather then stay the size the flex box spec says it should be. In other words, once add enough content to the content container rather than kicking the scrollbars the content container will just keep getting taller, then break the layout entirely.

• I know using explicit height for content container is a workaround, but it is not a prefer or valid solution for us.
• Due to the nature of our layout being flexible we can't just use something like percentages.

Answer 1

Try adding overflow: auto; to the .main div

.container .innerContainer .main {
    background-color: #A3845D;
    flex-grow: 1;
    display: flex;
    overflow: auto; /*<< added */
}

Works fine on my version of FF (59.0.2) can't check in IE currently.

Answer 2

NOTICE - Fecosos gave the right answer and beat me to it by a long time. I'll leave up my code as it strips out a lot of the unnecessary stuff.

---

Apologies for butchering your code but this seems to work in FF and Chrome. No idea about IE. (I recall Safari giving me the most problems but I forget if it was with this specific issue.)

Note - I copied this code from an app where I was having a similar problem and I never figured out why the problem existed, I recall just trial and erroring different things until I got something that worked.

pen

https://codepen.io/nooble/pen/GxXyzb

code

var rightPanel = document.getElementById("rightPanel");
for(var loop = 0; loop < 50; loop++) {
    var contentNode = document.createElement("div");
    contentNode.className = "content";
    contentNode.innerText = "Content";
    rightPanel.appendChild(contentNode);
}

* { 
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Roboto";
}
body {
  height: 100vh;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main {
  display: flex;
  overflow-y: auto; /* this is important */
}
.left {
  flex: 1;
  max-width: 100px;
}
.right {
  flex: 2;
  width: 100%;
  overflow-y: auto; /* this is important */
}
/* unnecessary styling stuff below */
body { background-color: grey; } .header { background-color: red; } .navigator { background-color: #5E6074; } .main { background-color: #A3845D; } .left {	background-color: #808080; } .right { background-color: #78AB86; } .content { background-color: #406C98; } .footer { background-color: green; }

<div class="container">
  <div class="header">Header</div>
  <div class="navigator">Navigator</div>
  <div class="main">
    <div class="left">Left</div>
    <div class="right" id="rightPanel">    </div>
  </div>
  <div class="footer">Footer</div>
</div>