Fix infobox styles to work well with multiple column infobox rows

I used the fix provided by TheDJ and tested out locally
on Firefox 57 and Chrome latest, but I couldn't test out
any grade C browser as on Linux it's really hard to find
such an outdated browser like Internet Explorer on Windows.

Bug: T168716
Change-Id: I8e03610e4eb3c93b80bb757592c2fb3079a68412

resources/skins.minerva.content.styles/hacks.less

@@ -50,14 +50,24 @@ FIXME: Review all of these hacks to see if they still apply.
 			text-align: left;
 			background-color: @colorGray15;
 
+			display: flex;
+			flex: 1 1 100%;
+			flex-flow: column nowrap;
+
 			th, td {
 				vertical-align: top;
 				border: 0;
 				border-bottom: 1px solid @colorGray14;
 				padding: 7px 10px;
 			}
 
-			td {
+			tbody > tr > td,
+			tbody > tr > th {
+				flex: 1 0;
+			}
+
+			td:only-child,
+			th:only-child {
 				width: 100%;
 			}
 
@@ -66,6 +76,17 @@ FIXME: Review all of these hacks to see if they still apply.
 				border: 0;
 			}
 		}
+
+		&.infobox > tbody {
+			display: flex;
+			flex-flow: column nowrap;
+		}
+
+		&.infobox > tbody > tr {
+			min-width: 100%;
+			display: flex;
+			flex-flow: row nowrap;
+		}
 	}
 }
 

resources/skins.minerva.tablet.styles/hacks.less

@@ -22,11 +22,6 @@ FIXME: Review all of these hacks to see if they still apply.
 		width: auto !important;
 		float: right !important;
 		clear: right !important;
-
-		td {
-			width: auto;
-		}
-
 	}
 	// banners inserted by other extensions, i.e. Zero
 	#mw-mf-page-center .mw-mf-banner {