{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/material/issues/3376","labels_url":"https://api.github.com/repos/angular/material/issues/3376/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/3376/comments","events_url":"https://api.github.com/repos/angular/material/issues/3376/events","html_url":"https://github.com/angular/material/issues/3376","id":89841418,"number":3376,"title":"Flex Layout Issues with Min-Height / Relative Positioning","user":{"login":"chrismbeckett","id":6036093,"avatar_url":"https://avatars.githubusercontent.com/u/6036093?v=3","gravatar_id":"","url":"https://api.github.com/users/chrismbeckett","html_url":"https://github.com/chrismbeckett","followers_url":"https://api.github.com/users/chrismbeckett/followers","following_url":"https://api.github.com/users/chrismbeckett/following{/other_user}","gists_url":"https://api.github.com/users/chrismbeckett/gists{/gist_id}","starred_url":"https://api.github.com/users/chrismbeckett/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chrismbeckett/subscriptions","organizations_url":"https://api.github.com/users/chrismbeckett/orgs","repos_url":"https://api.github.com/users/chrismbeckett/repos","events_url":"https://api.github.com/users/chrismbeckett/events{/privacy}","received_events_url":"https://api.github.com/users/chrismbeckett/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-06-21T00:44:09Z","updated_at":"2015-06-21T00:44:09Z","closed_at":null,"body":"I see a lot of issues being reporting about layouts not working on various devices or browsers, Yesterday I setup a fairly common nested layout:\r\n\r\n- outer row layout with a left fixed sidenav and flex content area\r\n- inner column layout with a top-level toolbar and flex content-area\r\n\r\nThe results across Chrome, IE10, Firebox, Android5 and IOS8 was very inconsistent. Most of the problems were related to scrollbars not showing up for overflow, and flex children not filling their containers. After much tweaking, the following solved all my layout issues:\r\n\r\n[layout-fill] {\r\n  height: 100% !important;\r\n  position: absolute;\r\n}\r\n\r\na) It seems a lot of the CSS layout in angular material is using min-height instead of height. There are known flex issues in some browsers with min-height not calculating flex children correctly, and I saw this across multiple browsers. Setting height fixed the problem.\r\n\r\nb) Particularly in chrome, scrolling was screwed up on flex children when position: relative was used. Switching to absolute for full-height/width solved the scrolling from Chrome browser and Android."}}