From 6992935807a5ed7ec60fb97e3f9fd02cc102a110 Mon Sep 17 00:00:00 2001
From: thoppe <thomas.hoppe@n-fuse.de>
Date: Sun, 12 Jan 2014 12:56:12 +0100
Subject: [PATCH] Fix fieldset width in Chrome and Firefox

Fixes an issue in Firefox [1] and Chrome [2]. The implicit width of
`fieldset` can be determined by the width of descendants rather than the
parent container. This change (adding `min-width:0`) makes the
`fieldset` behave like a `div` in this regard.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=504622
[2] http://stackoverflow.com/questions/8084343/google-chrome-fieldset-overflow-bug

Close #272
---
 normalize.css | 10 ++++++----
 test.html     |  7 +++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/normalize.css b/normalize.css
index c2de8df..a892722 100644
--- a/normalize.css
+++ b/normalize.css
@@ -257,13 +257,15 @@ figure {
    ========================================================================== */
 
 /**
- * Define consistent border, margin, and padding.
+ * 1. Define consistent border, margin, and padding.
+ * 2. Address width being affected by wide descendants in Chrome and Firefox.
  */
 
 fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
+    border: 1px solid #c0c0c0; /* 1 */
+    margin: 0 2px; /* 1 */
+    min-width: 0; /* 2 */
+    padding: 0.35em 0.625em 0.75em; /* 1 */
 }
 
 /**
diff --git a/test.html b/test.html
index c900991..ab9a79b 100644
--- a/test.html
+++ b/test.html
@@ -268,6 +268,13 @@
         <h1>Forms</h1>
 
         <form>
+            <div style="width:500px;">
+                <fieldset>
+                    <legend>Fieldset with a wider child</legend>
+                    <div style="width:600px; height:50px; background:red;"></div>
+                </fieldset>
+            </div>
+
             <fieldset>
                 <legend>Inputs as descendents of labels (form legend). This doubles up as a long legend that can test word wrapping.</legend>
                 <p><label>Text input <input type="text" value="default value that goes on and on without stopping or punctuation"></label></p>