i have code renders on chrome stable. have received reports of code working incorrectly on beta , dev , able reproduce issue on canary. found this psa appears related issue. so, working under assumption change more closely follow spec rather bug.
my software targets google chrome. so, robust solution not needed although nice have backwards compatibility.
the setup is:
- parent element has
display:flex,flex-direction: column, hasmax-heightapplied it. - a deep descendant of parent exceeds
max-height
and behavior change is:
- on stable,
max-heightenforced , child not break out. - on canary,
max-heightdisregarded , child breaks out.
i able prevent child breaking out applying max-height inner element. however, not desirable because need reduce value max-height height of footer isn't done in non-contrived example.
the following code snippet highlights 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 screenshot of how renders on chrome canary (left) vs chrome stable (right):
is able tell me how adjust code such inner + footer respect max-height value of outer?
i believe understand issue, build upon answer more learn more solution.
this issue introduced due resolution of this bug filed against chromium. spec indicates default value of flex container should min-height: auto min-height: 0.
a specific comment addresses fact breaking change against production websites , references suggested change:
the change is:
in case patch breaks website or chrome ui, fix add:
min-width: 0;
min-height: 0;
applying min-height: 0 .inner resulted in layout consistent see on stable.
