Why does this flex item not change according to its container's height?

Question

What I'd Like to Happen

I have a .box whose height is constrained to stay within the viewport. Nested a couple levels within this element I have a .content-body that contains a header and a .content item. I'd like for just .content to shrink (with scrollbars displayed) when the height of .box is small enough.

What Happens

In Chrome it all works as intended (like the pic above), but in almost every other browser, it gets cutoff because the content doesn't want to shrink.

The Code

I made a CodePen to demonstrate the problem. Simply resize the height of the browser and observe how the content element responds. Here's the same code on StackOverflow for posterity.

/* the most relevant rules to the problem */

.container{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
  display: flex;
  flex-direction: column;
  max-height: calc( 100vh - 50px );
  position: relative;
  overflow: hidden;
}

.box-body { 
  display: flex;
  flex-flow: column;
}

.content-body{
  display: flex;
  flex-direction: column;
}

.content{
  overflow: auto;
}

/* other stuff (appearance mostly) that probably doesn't matter */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box{
    /* appearance */
  width: 600px;
  border-radius: 20px;
  border: 1px solid #bbb;
}
.box-body{
    /* appearance */
  padding: 20px;
  font-family: sans-serif;
  font-size: 18px;
}

.content-header{
  /* appearance */  
  background: #ddd;
  padding: 10px;
  margin-bottom: 10px;
}

.box-label {
  /* appearance */
  padding: 30px 10px;
  background: teal;
  color: white;
  font-family: sans-serif;
  font-size: 20px;
}

.content{
  padding: 10px;
}

p {
  margin: 10px 0px;
}

<div class="container">

  <div class="box">

    <div class="box-label">
      Header
    </div>

    <div class="box-body">

      <div class="content-body">
        <div class="content-header">
          Content Header
        </div>
        <div class="content">
          <p>Mr do raising article general norland my hastily. Its companions say uncommonly pianoforte favourable.</p>

          <p>On projection apartments unsatiable so if he entreaties appearance. Rose you wife how set lady half wish. Hard sing an in true felt. Welcomed stronger if steepest ecstatic an suitable finished of oh. Entered at excited at forming between so
            produce.</p>

          <p>Answer misery adieus add wooded how nay men before though. Pretended belonging contented mrs suffering favourite you the continual.</p>
        </div>
      </div>

    </div>

    <div class="box-label">
      Footer
    </div>

  </div>

</div>

Answer 1

An initial setting on flex items is min-height: auto.

This means that a flex item, in a column-direction container (like the ones in your code), cannot be shorter than its content.

As you have observed, flex items in Chrome do what you want right out of the box.

Firefox, Edge and possibly other browsers need you to override the default setting.

Add this to your code:

.box-body { 
  min-height: 0;  /* new */
}

.content-body {
  min-height: 0;  /* new */
}

revised fiddle

Full explanation: Why doesn't flex item shrink past content size?