Attempt to fix overflow issues with hsc- and mb-style implementations

* display:flex for three-column
* float content and some voodoo for two-column (same as monobook)

Also had to slightly rearrange dom to make the latter work. Content
is now before nav in dom.

Change-Id: I7209eb21473877592d89f8471f8f8ed1f6b87851

includes/TimelessTemplate.php

@@ -36,24 +36,7 @@ class TimelessTemplate extends BaseTemplate {
 
 		$html .= Html::rawElement( 'div', [ 'id' => 'mw-content-container', 'class' => 'ts-container' ],
 			Html::rawElement( 'div', [ 'id' => 'mw-content-block', 'class' => 'ts-inner' ],
-				Html::rawElement( 'div', [ 'id' => 'mw-site-navigation' ],
-					$this->getLogo( 'p-logo', 'image' ) .
-					$this->getMainNavigation() .
-					$this->getSidebarChunk(
-						'site-tools',
-						'timeless-sitetools',
-						$this->getPortlet(
-							'tb',
-							$this->pileOfTools['general'],
-							'timeless-sitetools'
-						)
-					)
-				) .
-				Html::rawElement( 'div', [ 'id' => 'mw-related-navigation' ],
-					$this->getPageToolSidebar() .
-					$this->getInterlanguageLinks() .
-					$this->getCategories()
-				) .
+				Html::rawElement( 'div', [ 'id' => 'mw-content-wrapper' ],
 					Html::rawElement( 'div', [ 'id' => 'mw-content' ],
 						Html::rawElement( 'div', [ 'id' => 'content', 'class' => 'mw-body',  'role' => 'main' ],
 							$this->getSiteNotices() .
@@ -91,8 +74,27 @@ class TimelessTemplate extends BaseTemplate {
 								$this->getClear()
 							)
 						)
+					)
 				) .
 				$this->getAfterContent() .
+				Html::rawElement( 'div', [ 'id' => 'mw-site-navigation' ],
+					$this->getLogo( 'p-logo', 'image' ) .
+					$this->getMainNavigation() .
+					$this->getSidebarChunk(
+						'site-tools',
+						'timeless-sitetools',
+						$this->getPortlet(
+							'tb',
+							$this->pileOfTools['general'],
+							'timeless-sitetools'
+						)
+					)
+				) .
+				Html::rawElement( 'div', [ 'id' => 'mw-related-navigation' ],
+					$this->getPageToolSidebar() .
+					$this->getInterlanguageLinks() .
+					$this->getCategories()
+				) .
 				$this->getClear()
 			)
 		);

resources/screen-desktop-full.less

@@ -1,17 +1,22 @@
 @import 'variables.less';
 
+#mw-content-block {
+	.flex-display;
+	clear: both;
+}
+
 #mw-site-navigation {
 	.column-left();
+	.flex(0, 0, @column-left-size, 1);
 }
 
-#mw-content {
-	margin-left: @column-left-size;
-	margin-right: @column-right-size;
-	overflow: auto;
+#mw-content-wrapper {
+	.flex(1, 1, auto, 2);
 }
 
 #mw-related-navigation {
 	.column-right();
+	.flex(0, 0, @column-right-size, 3);
 }
 
 // Redundant content category list

resources/screen-desktop-mid.less

@@ -1,17 +1,28 @@
 @import 'variables.less';
 
+#mw-content-block {
+	clear: both;
+}
+
 #mw-site-navigation,
 #mw-related-navigation {
 	.column-left();
+	display: block;
+	width: @column-left-size;
+	position: relative;
 }
 
 #mw-related-navigation > div.sidebar-chunk:first-child {
 	margin-top: 0;
 }
 
+#mw-content-wrapper {
+	float: right;
+	margin-left: -@column-left-size;
+	width: 100%;
+}
 #mw-content {
 	margin-left: @column-left-size;
-	overflow: auto;
 }
 
 // Redundant content category list

resources/screen-desktop-small.less

@@ -64,8 +64,9 @@
 }
 
 #mw-site-navigation {
-	float: left;
-	margin-left: 2em;
+	position: absolute;
+	top: 3.1em;
+	left: 2em;
 
 	.sidebar-chunk {
 		margin: 0 1em 0 0;
@@ -75,8 +76,9 @@
 	}
 }
 #mw-related-navigation {
-	float: right;
-	margin-right: 2em;
+	position: absolute;
+	top: 3.1em;
+	right: 2em;
 
 	.sidebar-chunk {
 		margin: 0 0 0 1em;

resources/variables.less

@@ -109,7 +109,6 @@
 
 .nav-block() {
 	.box();
-	overflow: auto;
 	padding: 1.5em 1.5em 0;
 	margin: 1em 0;
 	line-height: 1.1;
@@ -136,9 +135,6 @@
 }
 
 .column-right() {
-	width: @column-right-size;
-	float: right;
-	clear: right;
 	padding-left: 1em;
 	box-sizing: border-box;
 
@@ -147,9 +143,6 @@
 	}
 }
 .column-left() {
-	width: @column-left-size;
-	float: left;
-	clear: left;
 	padding-right: 1em;
 	box-sizing: border-box;