Fix fieldset width in Chrome and Firefox

thoppe · necolas · commit 6992935807a5 · 2014-01-15T13:20:25.000-08:00
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
diff --git 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
@@ -268,6 +268,13 @@ <h1>Tabular data</h1>
         <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>
