Flexbox max-height interpretation change on Chrome - css

Question

I have some code which currently renders properly on Chrome Stable. I have received reports of the code working incorrectly on Beta and Dev and I am able to reproduce the issue on Canary. I found this PSA which appears related to my issue. So, I am working under the assumption this is a change to more closely follow spec rather than a bug.
My software only targets Google Chrome. So, a robust solution is not necessarily needed although it would be nice to have backwards compatibility.
The setup is:
Parent element has display:flex, flex-direction: column and has max-height applied to it.
A deep descendant of the parent exceeds the max-height
And the behavior change is:
On stable, max-height is enforced and child does not break out.
On canary, max-height is disregarded and child breaks out.
I am able to prevent the child from breaking out by applying max-height to the inner element. However, this is not desirable because I would need to reduce the value for max-height by the height of footer which isn't easily done in a non-contrived example.
The following code snippet highlights my issue:
.outer {
display: flex;
flex-direction: column;
max-height: 410px;
}
.inner {
display: flex;
flex-direction: column;
}
.content {
width: 200px;
height: 500px;
background-color: green;
}
.footer {
height: 20px;
width: 200px;
background-color: red;
}
<div class='outer'>
<div class='inner'>
<div class='content'>
</div>
</div>
<div class='footer'>
</div>
</div>
Here is a screenshot of how this renders on Chrome Canary (left) vs Chrome Stable (right):
Is anyone able to tell me how to adjust this code such that inner + footer respect the max-height value of outer?

Answer 1

I believe I understand the issue, but I will build upon this answer more as I learn more about the solution.
This issue was introduced due to resolution of this bug filed against Chromium. The spec indicates that the default value of a flex container should be min-height: auto where as currently it is min-height: 0.
A specific comment addresses the fact that this is a breaking change against all production websites and references a suggested change:
https://code.google.com/p/chromium/issues/detail?id=426898#c17
The change is:
In case this patch breaks any website or chrome UI, the fix is likely
to add:
min-width: 0;
min-height: 0;
Applying min-height: 0 to .inner resulted in a layout consistent with what I currently see on stable.