{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/5104","labels_url":"https://api.github.com/repos/angular/material/issues/5104/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/5104/comments","events_url":"https://api.github.com/repos/angular/material/issues/5104/events","html_url":"https://github.com/angular/material/issues/5104","id":110903172,"number":5104,"title":"New version causes the height of flex items not fit their contents","user":{"login":"johnnyluu","id":5201145,"avatar_url":"https://avatars.githubusercontent.com/u/5201145?v=3","gravatar_id":"","url":"https://api.github.com/users/johnnyluu","html_url":"https://github.com/johnnyluu","followers_url":"https://api.github.com/users/johnnyluu/followers","following_url":"https://api.github.com/users/johnnyluu/following{/other_user}","gists_url":"https://api.github.com/users/johnnyluu/gists{/gist_id}","starred_url":"https://api.github.com/users/johnnyluu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/johnnyluu/subscriptions","organizations_url":"https://api.github.com/users/johnnyluu/orgs","repos_url":"https://api.github.com/users/johnnyluu/repos","events_url":"https://api.github.com/users/johnnyluu/events{/privacy}","received_events_url":"https://api.github.com/users/johnnyluu/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/material/labels/priority:%20high","name":"priority: high","color":"0052cc"},{"url":"https://api.github.com/repos/angular/material/labels/ui:%20flexbox","name":"ui: flexbox","color":"fbca04"}],"state":"closed","locked":false,"assignee":{"login":"ThomasBurleson","id":210413,"avatar_url":"https://avatars.githubusercontent.com/u/210413?v=3","gravatar_id":"","url":"https://api.github.com/users/ThomasBurleson","html_url":"https://github.com/ThomasBurleson","followers_url":"https://api.github.com/users/ThomasBurleson/followers","following_url":"https://api.github.com/users/ThomasBurleson/following{/other_user}","gists_url":"https://api.github.com/users/ThomasBurleson/gists{/gist_id}","starred_url":"https://api.github.com/users/ThomasBurleson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThomasBurleson/subscriptions","organizations_url":"https://api.github.com/users/ThomasBurleson/orgs","repos_url":"https://api.github.com/users/ThomasBurleson/repos","events_url":"https://api.github.com/users/ThomasBurleson/events{/privacy}","received_events_url":"https://api.github.com/users/ThomasBurleson/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/17","html_url":"https://github.com/angular/material/milestones/0.12","labels_url":"https://api.github.com/repos/angular/material/milestones/17/labels","id":1166984,"number":17,"title":"0.12","description":"Polish and Bugfixes leading up to 1.0\r\n","creator":{"login":"robertmesserle","id":571363,"avatar_url":"https://avatars.githubusercontent.com/u/571363?v=3","gravatar_id":"","url":"https://api.github.com/users/robertmesserle","html_url":"https://github.com/robertmesserle","followers_url":"https://api.github.com/users/robertmesserle/followers","following_url":"https://api.github.com/users/robertmesserle/following{/other_user}","gists_url":"https://api.github.com/users/robertmesserle/gists{/gist_id}","starred_url":"https://api.github.com/users/robertmesserle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robertmesserle/subscriptions","organizations_url":"https://api.github.com/users/robertmesserle/orgs","repos_url":"https://api.github.com/users/robertmesserle/repos","events_url":"https://api.github.com/users/robertmesserle/events{/privacy}","received_events_url":"https://api.github.com/users/robertmesserle/received_events","type":"User","site_admin":false},"open_issues":374,"closed_issues":546,"state":"open","created_at":"2015-06-16T15:48:24Z","updated_at":"2015-10-16T01:15:34Z","due_on":"2015-10-16T05:00:00Z","closed_at":null},"comments":5,"created_at":"2015-10-12T03:24:30Z","updated_at":"2015-10-16T01:15:34Z","closed_at":"2015-10-16T01:15:34Z","body":"I updated Angular Material to the latest version because I wanted to use the new menubar. However, the new implementation of flex layout caused my grid list to not scale property in MOBILE view. The parent elements, which have flex=\"50\" and flex-sm=\"100\", dont seem to fit it's content anymore. More specifically, some of the containers of the md-cards don't have the same height as the md-cards,  resulting in overlapping cards.\r\nTHis is how it works now: http://codepen.io/johnnyluu/pen/jbLvge\r\nI've been trying to fix this for more than 5 hours without any luck. Can someone more familiar with flexbox enlighten me on what can be done to fix this? Thank you very much!"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/148565961","html_url":"https://github.com/angular/material/issues/5104#issuecomment-148565961","issue_url":"https://api.github.com/repos/angular/material/issues/5104","id":148565961,"user":{"login":"ThomasBurleson","id":210413,"avatar_url":"https://avatars.githubusercontent.com/u/210413?v=3","gravatar_id":"","url":"https://api.github.com/users/ThomasBurleson","html_url":"https://github.com/ThomasBurleson","followers_url":"https://api.github.com/users/ThomasBurleson/followers","following_url":"https://api.github.com/users/ThomasBurleson/following{/other_user}","gists_url":"https://api.github.com/users/ThomasBurleson/gists{/gist_id}","starred_url":"https://api.github.com/users/ThomasBurleson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThomasBurleson/subscriptions","organizations_url":"https://api.github.com/users/ThomasBurleson/orgs","repos_url":"https://api.github.com/users/ThomasBurleson/repos","events_url":"https://api.github.com/users/ThomasBurleson/events{/privacy}","received_events_url":"https://api.github.com/users/ThomasBurleson/received_events","type":"User","site_admin":false},"created_at":"2015-10-16T01:15:33Z","updated_at":"2015-10-16T01:15:33Z","body":"@johnnyluu - Here is a working CodePen:  http://codepen.io/ThomasBurleson/pen/NGaeMg  using latest in master. The trick here is:\r\n\r\n```html\r\n <div layout=\"row\" layout-sm=\"column\" class=\"cp\" style=\"min-height:100vh\" >\r\n    <div ng-repeat=\"n in [1,2,3,4,5]\" class=\"container\" flex=\"50\" flex-sm=\"100\" layout=\"column\">\r\n      <md-card flex >{{n}}</md-card>\r\n    </div>\r\n</div>\r\n```\r\n\r\nwhere \r\n*  the parent container (outside the repeated divs) has a defined, not-ambiguous height. I used 100vh but you could also specify an px height. \r\n* I set the `<md-card flex>`\r\n\r\nThis all seems to work great.\r\n\r\n"}}