Chrome上的Flexbox最大高度解释更改

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.