md-content doesn't work correctly with flex.

[langley-agm]

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 ?

[nkoterba]

@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 md-content nested inside several layers of divs with layout="column" and "flex" to correctly scroll.

Using latest chrome and MD 0.10.0 (no RCs yet for me).

I agree that the demo of md-content uses a fixed height, which always works but like you said totally defeats the purpose of flexbox.

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 height: 1px. This seems to trick (at least Chrome, nervous about FF and IE) into correctly "boxing" md-content so my inner "overflowing" content scrolls (and not the whole parent div).

http://codepen.io/anon/pen/MwLQqJ

Here's another code-pen that is the current demo MD uses in their documentation for md-content. All I've done is add more content to ensure scrolling will occur and remove the "fixed" height of the md-content element.

You see the same behavior you describe above.

What I would expect to happen is that if I add flex to the md-content, it should fill all the space after the md-toolbar but stop at the bottom of the parent div and the md-toolbar should not scroll, just the content in the md-content container.

[juandiago]

@nkoterba thnks for the height:1px workaround.

Works like a charm!

[topherfangio]

Hi all, I am looking into this issue, but I'm having trouble understanding the height: 1px fix/workaround. When I apply that to the md-content, it gives me a 1px tall block of text (which doesn't seem like a proper fix).

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?

[juandiago]

Here you go:

http://codepen.io/anon/pen/gpyEjV

Just remove the height:1px from the md-content

Hope it helps!..

[nkoterba]

@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 height: 1px then the entire "page" scrolls versus just the stuff in the top md-content.

[topherfangio]

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.

[topherfangio]

Seems the same as #3901. We're still trying to determine if there is a better fix or not.

[ThomasBurleson]

Closed with SHA 303ab0d

[topherfangio]

Due to some unexpected breaking in other developers applications (#4397), we have decided to remove this change from 0.11 and get some more community feedback before pushing a fix in 0.12.

Reverted in commit 44a7e52

[nkoterba]

Just wanted to say this is definitely still broken as of Sept 28, 2015 on the HEAD version.

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:

• Originally, without a defined height, the scrollbar would appear but scroll all content.
• Now, without a height, there is no scrollbar, but nothing scrolls.

Perhaps 3rd time will be the charm?

[ThomasBurleson]

We just updated master with stability fixes in layout.css.
With those fixes and tweaks to your demo fixes the Toolbar with Scroll Demo works

Note the overrides to the docs.css with:

body {
  height : 100%;
  overflow : auto; 
}

Also this class is invalid: class="md-flex"
Please use [flex], [flex-md], etc.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.