-
Notifications
You must be signed in to change notification settings - Fork 3.4k
md-content doesn't work correctly with flex. #4022
Comments
@langley-agm I'm not sure how to do that cool little thumbs up emoticon, so I'll just have to do: +1 +1 +1 Been struggling all day to get a Using latest chrome and MD I agree that the demo of I'm not sure if this is a bug, intentional design, or what. My current hack/workaround is to give the md-content a style of http://codepen.io/anon/pen/MwLQqJ Here's another code-pen that is the current demo MD uses in their documentation for You see the same behavior you describe above. What I would expect to happen is that if I add |
@nkoterba thnks for the Works like a charm! |
Hi all, I am looking into this issue, but I'm having trouble understanding the Can one of you produce a quick demo that shows the issue and has the CSS fix commented out so that I can comment it back in and see the difference? |
Here you go: http://codepen.io/anon/pen/gpyEjV Just remove the Hope it helps!.. |
@topherfangio @juandiago demo is a good example. I updated the codepen to use the "master" CSS and JS files as it was still on 0.10 (instead of 0.10.1 or master): http://codepen.io/anon/pen/vOMMbX Issue still exists. As @juandiago said, if you remove the |
I can confirm that the following code should fix the issue: md-content[flex] {
height: 0px;
} We have a team meeting today, let me confirm with the others that this shouldn't break anything else. |
Seems the same as #3901. We're still trying to determine if there is a better fix or not. |
Closed with SHA 303ab0d |
Originally, it seemed that adding the `height: initial` made no significant change to the layout system except to fix #4022, however, multiple users have experienced major issues with their layouts: #4397. We are reverting so that we can take some more time to work with the community to find a better fix. Reverts commit 303ab0d
Originally, it seemed that adding the `height: initial` made no significant change to the layout system except to fix angular#4022, however, multiple users have experienced major issues with their layouts: angular#4397. We are reverting so that we can take some more time to work with the community to find a better fix. Reverts commit 303ab0d
Just wanted to say this is definitely still broken as of Sept 28, 2015 on the Check out the codepen: https://codepen.io/anon/pen/avBMKd Thankfully, I followed #4453, which suggests the following fix that I currently have commented out in the codepen. Just re-enable the suggested "fix" CSS, and md-content scrolls again! Update:
Perhaps 3rd time will be the charm? |
We just updated
|
This issue is closed as part of our ‘Surge Focus on Material 2' efforts. |
Maybe it works as expected but if it does, I'm not sure I fully understand the purpose of md-content and the documentation resumes up to one single line. I made a shorter example of my issue.
I want two divs with overflowing content each covering half the page,
This example works as I would expect (the two divs are immediate children of the body):
http://codepen.io/langley/pen/Nqorzv
However if they are not direct children of the body, but a div instead, or even another md-card, md-whiteframe or any other, it stops working:
http://codepen.io/langley/pen/waNWYe
In order to make it work I have to apply height: inherit or height: 100% to the parent:
http://codepen.io/langley/pen/KpJMbR
It's not a big deal in this example but if the object I want to be scrollable is a nested child of 10 elements, I have to apply this to every single parent, not just the closest.
I see that in the demo a fixed px value is used, but I thought the whole idea of being responsive is to use flex-xx style and % instead of fixed px values ?
The text was updated successfully, but these errors were encountered: