Material: Possible Chrome 48 flexbox bug causing layout issues.

[cah-ricksuggs]

I have been getting several reports of production defects, that seem to relate to flexbox bugs that have been introduced in Chrome version 48. I was not able to reproduce the issues until after upgrading to Chrome 48. After attempting to address some of the issues, I first found the Chrome changelog included several references to updates to scrollable areas. Then I discovered the following bug report: https://code.google.com/p/chromium/issues/detail?id=580196

One such issue that I am currently experiencing is that md-content elements appear to be expanding their parent elements and I am unable to scroll to the bottom when the window height is reduced.

The following codepen was taken directly from the angular material 1.0.3 demo page: https://material.angularjs.org/latest/demo/content

http://codepen.io/anon/pen/xZWOXX
To reproduce the issue, I just resized the window until all of the text did not appear, and noticed that scrollbars do not appear and I cannot scroll the content.

[jmuharsky]

The core issue seems to be a requirement in Chrome 48 that flex sections be set to min-height: 0 and min-width: 0. We've been debugging this today as our browsers self-update and our layout breaks accordingly.

[jmuharsky]

Chromium Bug #546034 details the workaround and cause of this.

[ThomasBurleson]

@cah-ricksuggs, @jmuharsky - thx for this report and details. I will investigate immediately.

[cah-ricksuggs]

@ThomasBurleson Great, thanks for the fast response time!

[jmuharsky]

FYI, we worked around this by overriding the flex attribute's behavior in our own project. Here is the relevant PR.

[klausw]

If I understand it right, setting min-height: 0 or max-height: 0 is specifically necessary when flex-base is zero, as it is by default for an unadorned "flex" property. It should not be necessary for a nonzero flex-base.

[dohomi]

I experienced this issue while having a child element with

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

For now it works changing to different stylesheet.

[sky10p]

I have updated to the last version and I have the same problems.

The images are seen with a taller hight.

The correct result has to be..

I hope that errors can be solved.

Thank you so much, and sorry for my bad English.

[ValentinCreative]

@sky10p try this as a workaround :

.YourImages {
  min-height: 0;
}

It worked for me.

[pradeep330]

Had the same issue, Child div with ellipsis css.

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

[GautierT]

Still got the bug after upgrading to 1.0.4 on Chrome 48.
I have to put min-height: 0; to almost all element (md-card, md-card-content, md-card-title, ...)
The behaviour is very weird because if i add min-height: 0; on the debug console on chrome it will work and calculate the height correctly but if i remove min-height: 0; after that is still correctly calculate the height...

Firefox 43 with Angular Material 1.0.4

Chrome 48 with Angular Material 1.0.4

Thanks

[pradeep330]

Add flex="none"
Overflow-x:auto and text-overflow:ellipsis not working in chrome 48

[GautierT]

@pradeep330 : flex="none" working great !

[pradeep330]

@GautierThiriez : :)

Add flex="none" for non flex div.

And Fix for overflow-x: add style width:any value. i added zero like below.

<div layout="row"> <div "style=width:0" layout="row" flex> <p>overflow will get scroll bar</p> </div> </div>

[GautierT]

@pradeep330 : Hum.. It will be a nice afternoon to find all non flex div and add flex="none"... !
Thanks a lot for the fix.

[jpdevries]

I am running into Chrome 48 flexbox issues as well at http://jpdevries.github.io/eureka/examples/ but have confirmed my layout works fine in Chrome Canary v50 :(

[hourliert]

Thanks @jmuharsky Your solution works.

[JSOdin]

flex="none" working great for non flex elements as mentioned by @pradeep330 and @GautierThiriez. saved me a lot of time with this temp fix. thanks!

[donaldpipowitch]

min-height: 0; seems to work. Thanks.

[LuudJacobs]

min-height: 0; saved me. Thanks!

[ndraiman]

min-height: 0; on the img element works. Thank you!

[divyekhanna]

Hi, the fix is not working for me. Can anyone please explain what I'm not doing right?

I'm on material 1.0.5 and following is my index.html:

<body layout="column" ng-app="someApp" ng-controller="SomeCtrl" ng-cloak style="min-height:0;">
    <div layout="row" flex style="min-height:0;">
        <div layout="column" flex id="content" style="min-height:0;">
            <md-content layout="column" style="background-color:#eee;min-height:0;" flex class="md-padding" ng-view="">
            </md-content>
        </div>
    </div>
</body>

And following is my view:

<div layout="row" layout-align="center" style="min-height:0">
    <div layout="column" flex="80" style="min-height:0">
        <md-card ng-repeat="item in items" ng-click="onClickHandler(item)" ng-mouseenter="thisHover=true" ng-mouseleave="thisHover=false" style="outline:none;min-height:0;">
            <md-card-content style="min-height:0">
                <div style="min-height:0">
                    Long Paragraph
                </div>
            </md-card-content>
        </md-card>
    </div>
</div>

[ndraiman]

for me the issue was with the under , adding "min-height:
0;" to the fixed it.

On 7 February 2016 at 19:51, divyekhanna [email protected] wrote:

Hi, the fix is not working for me. Can anyone please explain what I'm not
doing right?

I'm on material 1.0.5 and following is my index.html:
style="min-height:0;">

And following is my view:

Long Paragraph

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/6841#issuecomment-181061194.

[divyekhanna]

@Nexxado Thanks for the suggestion. I've tried adding min-width:0 along with min-height:0 at all places and removing md-card-content directive, but no luck. Can't seem to understand the problem.

[divyekhanna]

My issue got resolved by adding flex="none" to md-card as suggested by @pradeep330 . Thanks guys!

[ShiftyMcCool]

@divyekhanna Thank you! Based on @pradeep330 's answer, I was adding flex="none" to every non-flex div tag I could find with no results. Adding it to md-card tags was the answer I was looking for! I was not only having a hard time understanding the problem, like you, but the proposed solutions as well.

[pradeep330]

@ShiftyMcCool actually what is the issue? there are 3-4 fixes are there like flex="none", width:0, min-width:0 etc,. What is your issue?

[pradeep330]

Add style="width:10px" for for flex div

[IltonS]

reporting the same error in Chrome 48 with angular material v0.11.2
adding min-height: 0 seems to solve it, but will chrome have any update to solve this any time soon? So this workaround won't be needed?

Full workaround used, may be helpfull to other users:

md-card>:not(md-card-content) img, md-card>img {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  height: 100% !important;
  min-height: 0;
}

[smurugavel]

This problem popped up on chrome v51.0.2, this AM. Fix is to add flex="none". Because, I use UI router, I had add flex="none" on the parent ui-views and that saved ton of my time.

Thanks @pradeep330 .

[Matheus-Ribeiro95]

This issue still open btw.

EDIT: Fix for me was:

/*md-card, md-card md-card-header { display: block; display: -webkit-box; }*/

[helbertoro]

add .col-12 after .row
<div class="row"> <div class="col-12"> <img class="img-fluid" src="" alt=""> </div> </div>