-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Possible Chrome 48 flexbox bug causing layout issues. #6841
Comments
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. |
Chromium Bug #546034 details the workaround and cause of this. |
@cah-ricksuggs, @jmuharsky - thx for this report and details. I will investigate immediately. |
@ThomasBurleson Great, thanks for the fast response time! |
FYI, we worked around this by overriding the flex attribute's behavior in our own project. Here is the relevant PR. |
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. |
I experienced this issue while having a child element with
For now it works changing to different stylesheet. |
@sky10p try this as a workaround : .YourImages {
min-height: 0;
} It worked for me. |
Had the same issue, Child div with ellipsis css. overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; |
Add flex="none" |
@pradeep330 : flex="none" working great ! |
@GautierThiriez : :) Add flex="none" for non flex div. And Fix for overflow-x: add style width:any value. i added zero like below. ` overflow will get scroll bar |
@pradeep330 : Hum.. It will be a nice afternoon to find all non flex div and add flex="none"... ! |
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 :( |
Thanks @jmuharsky Your solution works. |
Fixes #3487 See angular/material#6841
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! |
|
|
|
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:
And following is my view:
|
for me the issue was with the under , adding "min-height: On 7 February 2016 at 19:51, divyekhanna [email protected] wrote:
|
@nexxado Thanks for the suggestion. I've tried adding |
My issue got resolved by adding |
@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. |
@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? |
Add style="width:10px" for for flex div |
reporting the same error in Chrome 48 with angular material v0.11.2 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;
} |
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 . |
This issue still open btw. EDIT: Fix for me was:
|
add .col-12 after .row |
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.
The text was updated successfully, but these errors were encountered: