Flexbox renders properly in Chrome and unexpected in Firefox

Question

Consider the following example:

.a {
  display: flex;
  flex-direction: column;
  height: 80px;
  border: 2px solid blue;
}
.b {
  display: flex;
  flex-grow: 1;
  border: 2px solid red;
}
.c {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100px;
  border: 2px solid green;
}
.d {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}
.e {
  background-color: #aaa;
}

<div class="a">
  <div class="b">
    <div class="c">
      <div class="d">
        <div class="e">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
      </div>
    </div>
  </div>
</div>

Chrome renders this as expected, i.e. the red box is inside the blue one:

But, Firefox renders this differently, resulting in the red box to overflow the blue container:

Why is this happening?

How would you fix this cross browser issue?