Add flex classes, remove layout classes

admin/client/dist/styles/bundle.css

@@ -10512,9 +10512,7 @@ form.member-profile-form #Permissions .optionset li{
 .cms .cms-content{
   border-radius:0;
   background:#f6f7f8;
-  width:800px;
   z-index:40;
-  overflow:hidden !important;
 }
 
 .cms .cms-content-fields{
@@ -16034,6 +16032,72 @@ input.checkbox,input.radio,input[type=checkbox],input[type=radio]{
   box-shadow:0 16px 28px 0 rgba(0,0,0,.3),0 25px 55px 0 rgba(0,0,0,.3);
 }
 
+*,:after,:before{
+  box-sizing:border-box;
+}
+
+body,html{
+  width:100%;
+  height:100%;
+  padding:0;
+  font-size:13px;
+  display:-ms-flexbox;
+  display:-webkit-box;
+  display:flex;
+}
+
+body,h1,html{
+  margin:0;
+  line-height:20px;
+}
+
+h1{
+  font-size:18px;
+}
+
+.cms-menu{
+  position:relative;
+}
+
+.cms-preview{
+  display:none;
+}
+
+.toolbar--north,.toolbar--south{
+  height:52px;
+}
+
+.panel--scrollable{
+  overflow:auto;
+}
+
+.fill-height{
+  height:100%;
+  -ms-flex-direction:column;
+  -webkit-box-orient:vertical;
+          flex-direction:column;
+}
+
+.fill-height,.fill-width{
+  display:-ms-flexbox;
+  display:-webkit-box;
+  display:flex;
+  -webkit-box-direction:normal;
+}
+
+.fill-width{
+  width:100%;
+  -ms-flex-direction:row;
+  -webkit-box-orient:horizontal;
+          flex-direction:row;
+}
+
+.flexbox-area-grow{
+  -ms-flex:1;
+  -webkit-box-flex:1;
+          flex:1;
+}
+
 .campaign-admin__item-links--has-links,.campaign-admin__item-links--is-linked{
   color:#29abe2;
   float:right;

admin/client/src/styles/_layout.scss

@@ -135,3 +135,80 @@
 .z-depth-4 {
   box-shadow: $z-depth-4;
 }
+
+
+// TEST FLEXBOX
+// Reference https://css-tricks.com/boxes-fill-height-dont-squish/
+// Tested in IE10 & IE11
+
+*, *:before, *:after {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 13px;
+  line-height: 20px;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+h1 {
+  font-size: 18px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.cms-menu {
+  // width: 150px;
+  position: relative;
+}
+
+.cms-content { }
+
+
+.cms-preview {
+    display: none;
+  // width: 150px;
+}
+
+.toolbar--north,
+.toolbar--south {
+  height: 52px;
+}
+
+// Scrollable area
+.panel--scrollable {
+  overflow: auto;
+}
+
+// Flex magic
+
+// Nested items take up height
+.fill-height {
+  height: 100%;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+// Nested items take up width
+.fill-width {
+  width: 100%;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row;
+  flex-direction: row; // Default
+}
+
+// Item to take up available space
+.flexbox-area-grow {
+  -ms-flex: 1;
+  flex: 1;
+}

admin/client/src/styles/legacy/_style.scss

@@ -1409,9 +1409,7 @@ form.member-profile-form {
   .cms-content {
     border-radius: 0;
     background: $tab-panel-texture-color;
-    width: 800px;
     z-index: 40;
-    overflow: hidden !important; // TEMP until JS is removed
   }
 
   .cms-content-fields {

admin/templates/SilverStripe/Admin/Includes/CMSProfileController_Content.ss

@@ -1,4 +1,4 @@
-<div id="settings-controller-cms-content" class="cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
+<div id="settings-controller-cms-content" class="cms-content center cms-tabset flexbox-area-grow fill-height $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
 
 	<div class="cms-content-header north">
 		<% with $EditForm %>

admin/templates/SilverStripe/Admin/Includes/LeftAndMain_Menu.ss

@@ -1,10 +1,10 @@
-<div class="cms-menu cms-panel cms-panel-layout west" id="cms-menu" data-layout-type="border">
+<div class="cms-menu cms-panel cms-panel-layout" id="cms-menu" data-layout-type="border">
 	<div class="cms-logo-header north">
 		<% include SilverStripe\\Admin\\LeftAndMain_MenuLogo %>
 		<% include SilverStripe\\Admin\\LeftAndMain_MenuStatus %>
 	</div>
 
-	<div class="panel panel--scrollable panel--triple-toolbar cms-panel-content">
+	<div class="panel--scrollable panel--triple-toolbar cms-panel-content">
 		<% include SilverStripe\\Admin\\LeftAndMain_MenuList %>
 	</div>
 

admin/templates/SilverStripe/Admin/LeftAndMain.ss

@@ -11,7 +11,7 @@
 >
 	<% include SilverStripe\\Admin\\CMSLoadingScreen %>
 
-	<div class="cms-container center" data-layout-type="custom">
+	<div class="cms-container center fill-width" data-layout-type="custom">
 		$Menu
 		$Content
 		$PreviewPanel