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.

Also, I am unsure whether it will work in production
with the example article from the task, wasn't able
to recreate the article fully on my local devwiki.

Bug: T168716
Change-Id: Ied7c15f7a254228c23111df79da44d6167f1baac

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

@@ -42,29 +42,31 @@ FIXME: Review all of these hacks to see if they still apply.
 		margin-left: 0 !important;
 		margin-right: 0 !important;
 
+		&.infobox > tbody > tr > td,
+		&.infobox > tbody > tr > th {
+			flex: 1 0;
+		}
+
 		&.infobox {
-			font-size: 90%;
-			position: relative;
-			border: 1px solid @colorGray14;
-			margin-bottom: 2em;
-			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 {
+			td:only-child,
+			th:only-child {
 				width: 100%;
 			}
+		}
 
-			tr:last-child th,
-			tr:last-child td {
-				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 {