From d379df85ed411a9eec0a3adebfdb32dd4ecee8b6 Mon Sep 17 00:00:00 2001
From: Jon Hurrell <jonhurrell.digitaldwp@gmail.com>
Date: Mon, 6 Jun 2016 11:50:28 +0100
Subject: [PATCH] Fix legend text wrapping in IE.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

IE9-11 and Edge 12-13 can be completely fixed using box-sizing: border-box; max-width: 100%, but IE8 will still experience some issues as “the min-width property applies to content-box even if box-sizing is set to border-box” cite.
IE8-11 can be fixed using the 456 Berea St fix display: table; white-space: normal, but this fix will not work at all for Edge 12-13.
---
 public/sass/elements/_reset.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/public/sass/elements/_reset.scss b/public/sass/elements/_reset.scss
index 0a5373491..4000c1ce3 100644
--- a/public/sass/elements/_reset.scss
+++ b/public/sass/elements/_reset.scss
@@ -122,3 +122,15 @@ abbr[title],
 acronym[title] {
   text-decoration: none;
 }
+
+// Legend --------------------------------
+// Fix legend text wrapping in Edge and IE
+// ---------------------------------------
+// 1. IE9-11 & Edge 12-13
+// 2. IE8-11
+
+legend {
+  box-sizing: border-box; // [1]
+  max-width: 100%;        // [1]
+  display: table;         // [2]
+}