Fix <legend> elements inside <fieldset>'s that are the themselves in …

…the #main to not be treated as regular flex elements in IE10/IE11."

dist/script.js

@@ -250,6 +250,10 @@ function loadCurrentVersion() {
 	blocksElement.appendChild(blocksLegendElement);
 	blocksLegendElement.innerHTML = 'Blocks';
 
+	var blocksContentElement = document.createElement('div');
+	blocksElement.appendChild(blocksContentElement);
+	blocksContentElement.classList.add('fieldset-content');
+
 	var infoUnobtainableElement = document.getElementById('info-unobtainable');
 	var infoMigratableElement = document.getElementById('info-migratable');
 	var infoRemovedElement = document.getElementById('info-removed');
@@ -258,7 +262,7 @@ function loadCurrentVersion() {
 	checkEntries(blocks, infoMigratableElement, "isObtainableByMigration");
 	checkEntries(blocks, infoRemovedElement, "isRemoved");
 
-	loadEntries(blocks, blocksElement, "blocks");
+	loadEntries(blocks, blocksContentElement, "blocks");
 
 	var items = versions[id].items;
 
@@ -271,6 +275,10 @@ function loadCurrentVersion() {
 		itemsElement.appendChild(itemsLegendElement);
 		itemsLegendElement.innerHTML = 'Items';
 
+		var itemsContentElement = document.createElement('div');
+		itemsElement.appendChild(itemsContentElement);
+		itemsContentElement.classList.add('fieldset-content');
+
 		if (infoUnobtainableElement.style.display == "none") {
 			checkEntries(items, infoUnobtainableElement, "isUnobtainable");
 		}
@@ -283,7 +291,7 @@ function loadCurrentVersion() {
 			checkEntries(items, infoRemovedElement, "isRemoved");
 		}
 
-		loadEntries(items, itemsElement, "items");
+		loadEntries(items, itemsContentElement, "items");
 	}
 
 	var elementsWithTooltips = document.querySelectorAll('.with-tooltip');

scss/main.scss

@@ -25,15 +25,7 @@ img {
 }
 
 main > fieldset {
-	display: flex;
-
 	width: 320px;
-
-	flex-flow: row wrap;
-	align-content: flex-start;
-
-	row-gap: 3px;
-	column-gap: 4px;
 }
 
 main > fieldset:only-of-type {
@@ -172,7 +164,7 @@ p {
 #settings {
 	margin: 0 auto 24px auto;
 
-	max-width: 320px;
+	width: 320px;
 }
 
 #settings > button {
@@ -217,6 +209,16 @@ p {
 	gap: 16px;
 }
 
+.fieldset-content {
+	display: flex;
+
+	flex-flow: row wrap;
+	align-content: flex-start;
+
+	row-gap: 3px;
+	column-gap: 4px;
+}
+
 .id {
 	text-align: center;
 }