Flexbox max-height interpretation change on Chrome

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.