{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/2632","labels_url":"https://api.github.com/repos/angular/material/issues/2632/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/2632/comments","events_url":"https://api.github.com/repos/angular/material/issues/2632/events","html_url":"https://github.com/angular/material/issues/2632","id":72157560,"number":2632,"title":"flex-grow vs flex","user":{"login":"tkrotoff","id":643434,"avatar_url":"https://avatars.githubusercontent.com/u/643434?v=3","gravatar_id":"","url":"https://api.github.com/users/tkrotoff","html_url":"https://github.com/tkrotoff","followers_url":"https://api.github.com/users/tkrotoff/followers","following_url":"https://api.github.com/users/tkrotoff/following{/other_user}","gists_url":"https://api.github.com/users/tkrotoff/gists{/gist_id}","starred_url":"https://api.github.com/users/tkrotoff/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tkrotoff/subscriptions","organizations_url":"https://api.github.com/users/tkrotoff/orgs","repos_url":"https://api.github.com/users/tkrotoff/repos","events_url":"https://api.github.com/users/tkrotoff/events{/privacy}","received_events_url":"https://api.github.com/users/tkrotoff/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"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},"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/14","html_url":"https://github.com/angular/material/milestones/1.0-beta1","labels_url":"https://api.github.com/repos/angular/material/milestones/14/labels","id":951910,"number":14,"title":"1.0-beta1","description":"Initial availability of Angular Material v1.0","creator":{"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},"open_issues":89,"closed_issues":12,"state":"open","created_at":"2015-01-26T19:04:00Z","updated_at":"2015-08-14T21:57:56Z","due_on":"2015-09-15T07:00:00Z","closed_at":null},"comments":13,"created_at":"2015-04-30T13:22:02Z","updated_at":"2015-08-14T22:00:44Z","closed_at":null,"body":"Edit: my original mistake when I wrote this issue was to believe that `flex-shrink` in the context of `flex-wrap: wrap` was responsible for the widgets to shrink below their \"natural\" size => it is in fact \"controlled\" (more of a side effect?) by `flex-basis`.\r\n\r\n<br>\r\n\r\ntl;dr attribute `flex-grow` is most probably what users want instead of `flex`.\r\n\r\nngMaterial defines the `flex` attribute:\r\n```CSS\r\n[flex] {\r\n  flex: 1; /* Shorthand for flex-grow: 1; flex-shrink: 1 */\r\n}\r\n```\r\nYou \"advertise\" its use everywhere like it is the most common pattern. The item grows when space is available (good) and shrinks up to nothing if there is no space (not good). I believe this is not the most common use case.\r\nA better approach is to not shrink below the \"natural\" item/widget size if space is lacking. (If I remember well, this is what GTK+, Qt and Java Swing do).\r\n\r\nDemo: http://plnkr.co/edit/vjud32?p=preview\r\n\r\n![](http://s9.postimg.org/mrlve12u7/flex.png)\r\n\r\nI propose to define `flex-grow` attribute and use it instead of `flex`:\r\n```CSS\r\n[flex-grow] {\r\n  box-sizing: border-box;\r\n  flex-grow: 1;\r\n}\r\n```\r\n\r\nI don't think it is worth to define `flex-shrink` attribute: I do not believe it is a common pattern."},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/131250422","html_url":"https://github.com/angular/material/issues/2632#issuecomment-131250422","issue_url":"https://api.github.com/repos/angular/material/issues/2632","id":131250422,"user":{"login":"naomiblack","id":2286589,"avatar_url":"https://avatars.githubusercontent.com/u/2286589?v=3","gravatar_id":"","url":"https://api.github.com/users/naomiblack","html_url":"https://github.com/naomiblack","followers_url":"https://api.github.com/users/naomiblack/followers","following_url":"https://api.github.com/users/naomiblack/following{/other_user}","gists_url":"https://api.github.com/users/naomiblack/gists{/gist_id}","starred_url":"https://api.github.com/users/naomiblack/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/naomiblack/subscriptions","organizations_url":"https://api.github.com/users/naomiblack/orgs","repos_url":"https://api.github.com/users/naomiblack/repos","events_url":"https://api.github.com/users/naomiblack/events{/privacy}","received_events_url":"https://api.github.com/users/naomiblack/received_events","type":"User","site_admin":false},"created_at":"2015-08-14T22:00:44Z","updated_at":"2015-08-14T22:00:44Z","body":"Unfortunately, I don't think we can get to this before 1.0 (unless, possibly, a PR appears). Contributions welcome but I am pushing this out past beta."}}