Flexbox item with overflowing content only works on Chrome

Question

Please take a look at this pen:

https://codepen.io/linck5/pen/gRKJbY?editors=1100

body{ margin: 0;}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background-color: darksalmon;
  height: 50px;
}

.inner-container {
  flex: 1;
  background-color: chocolate;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top {
  background-color: blueviolet;
  flex: 1;
  overflow: auto;
  font-size: 40px;
  line-height: 5rem;
}

.bottom {
  background-color: darkkhaki;
  height: 200px;
}

<div class="container">
    
  <div class="top-bar">Top bar</div>

  <div class="inner-container">

    <div class="top">
      O<br>v<br>e<br>r<br>f<br>l<br>o<br>w<br>i<br>n<br>g<br>C<br>o<br>n<br>t<br>e<br>n<br>t
    </div>
    <div class="bottom">Bottom part</div>

  </div>
  
</div>

I want to have only the .top div be scrollable, not the entire page. I don't want the .top div to push down the .bottom div.

And this is exactly what happens on Chrome, everything works perfectly. But on Firefox and Edge, a scrollbar appears on the entire page, and the .bottom div is pushed down.

Also the .top-bar div gets shrunk down instead of having its desired 50px height.

Could you guys help me with this?

Answer 1

Three things to consider:

1. An initial setting on flex items is flex-shrink: 1. This means that items are permitted to shrink in order to create more space in the container. To disable this feature use flex-shrink: 0.

   See this post for a full explanation: What are the differences between flex-basis and width?

2. An initial setting on flex items is min-height: auto. This means that items cannot be smaller than the height of their content. To override this behavior use min-height: 0.

   See this post for a full explanation: Why doesn't flex item shrink past content size?

3. In your code, Firefox and Edge are adhering strictly to the spec. Chrome, it appears, considers the spec a foundation, but factors in common sense scenarios and expected user behavior.

For your layout to work across browsers, make the following adjustments:

body{ margin: 0;}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background-color: darksalmon;
  height: 50px;
  flex-shrink: 0; /* NEW */
  /* Or remove height and flex-shrink and just use this: 
     flex: 0 0 50px; */
}

.inner-container {
  flex: 1;
  background-color: chocolate;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0; /* NEW */
}

.top {
  background-color: blueviolet;
  flex: 1;
  overflow: auto;
  font-size: 40px;
  line-height: 5rem;
}

.bottom {
  background-color: darkkhaki;
  /* height: 200px; */
  flex: 0 0 200px; /* NEW */
  
}

<div class="container">
  <div class="top-bar">Top bar</div>
  <div class="inner-container">
    <div class="top">
O<br>v<br>e<br>r<br>f<br>l<br>o<br>w<br>i<br>n<br>g<br>C<br>o<br>n<br>t<br>e<br>n<br>t
    </div>
    <div class="bottom">Bottom part</div>
  </div>
</div>

revised pen