philipwalton · ShangWong · Jul 13, 2018 · Apr 20, 2020 · Jul 29, 2021
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ As the spec continues to evolve and vendors nail down their implementations, thi
 15. [Column flex items ignore `margin: auto` on the cross axis](#flexbug-15)
 16. [`flex-basis` cannot be animated](#flexbug-16)
 17. [Flex items are not correctly justified when `max-width` is used](#flexbug-17)
+18. [Using <textarea> element as flex items overflow their container ](#flexbug-18)
 
 
 <!-- To preserve old links -->
@@ -121,7 +122,7 @@ _`min-height` on a flex container won't apply to its flex items_
       <a href="https://philipwalton.github.io/flexbugs/3.2.b-workaround.html">3.2.b</a> &ndash; <em>workaround</em>
     </td>
     <td>Internet Explorer 10-11 (fixed in Edge)</td>
-    <td><a href="https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview">IE #802625</a></td>
+    <td><a href="http://web.archive.org/web/20170312223506/https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview">IE #802625 (archived)</a></td>
   </tr>
 </table>
 
@@ -581,7 +582,6 @@ _Column flex items ignore `margin: auto` on the cross axis_
     </td>
   </tr>
 </table>
-
 `margin: auto` can be used to fill all the available space between flex items (and is useful for centering), but in IE 10-11 this doesn't work in the cross axis for flex items within a column container.
 
 Instead of filling the available space, items render according to their `align-self` property, which defaults to `stretch`. Demo [15.1.a](https://philipwalton.github.io/flexbugs/15.1.a-bug.html) shows an example of this.
@@ -667,6 +667,36 @@ In other words, the following two declarations will both render an item with a f
 
 Demo [17.1.b](https://philipwalton.github.io/flexbugs/17.1.b-workaround.html) shows this working in IE 11.
 
+<!-- To preserve old links -->
+<a name="2-column-flex-items-set-to-align-itemscenter-overflow-their-container"><a>
+
+### Flexbug #18
+
+_Using <textarea> element as flex items overflow their container_
+
+<table>
+  <tr>
+    <th align="left">Demos</th>
+    <th align="left">Browsers affected</th>
+  </tr>
+  <tr valign="top">
+    <td>
+      <a href="https://philipwalton.github.io/flexbugs/18.1.a-bug.html">18.1.a</a> &ndash; <em>bug</em><br>
+      <a href="https://philipwalton.github.io/flexbugs/18.1.b-workaround.html">18.1.b</a> &ndash; <em>workaround</em>
+    </td>
+    <td>
+      Internet Explorer 11
+    </td>
+  </tr>
+</table>
+
+When using <textarea> element as the flex item, the columns of the <textarea> element, if too big, will overflow their container in IE 11.
+
+#### Workaround
+
+Similar to [#flexbug-2](#flexbug-2), this can be fixed by setting  `max-width: 100%` and  `min-width: 0%` on the <textarea> element. If you set <textarea> element property `overflow: auto` to `overflow: visible` in Firefox, <textarea> element overflow as well.
+
+
 
 ## Acknowledgments
 

diff --git a/docs/18.1.a-bug.html b/docs/18.1.a-bug.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 18.1.a (bug)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 18.1.a (bug)
+       */
+
+       .FlexContainer {
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        background: hsla(0, 0%, 0%, 0.1);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: row;
+        height: 200px;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        margin: 1em;
+        padding: 2em;
+        width: 300px;
+      }
+
+      .FlexItem {
+        background: hsla(0, 0%, 0%, 0.1);
+        padding: 1em;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="FlexContainer">
+      <textarea rows="2" cols="80" class="FlexItem">
+        The textarea is overflowing its container.
+      </textarea>
+    </div>
+  </body>
+</html>
diff --git a/docs/18.1.b-workaround.html b/docs/18.1.b-workaround.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 18.1.b (workaround)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 18.1.b (workaround)
+       *
+       * 1. Set `max-width:100%` to prevent
+       *    overflow.
+       * 2. Set `min-width:0%` to let IE 
+       *    get shrink size.
+       */
+
+       .FlexContainer {
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        background: hsla(0, 0%, 0%, 0.1);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: row;
+        height: 200px;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        margin: 1em;
+        padding: 2em;
+        width: 300px;
+      }
+
+      .FlexItem {
+        background: hsla(0, 0%, 0%, 0.1);
+        padding: 1em;
+        max-width: 100%; /* 1 */
+        min-width: 0%; /* 2 */
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="FlexContainer">
+      <textarea rows="2" cols="80" class="FlexItem">
+        The textarea is overflowing its container.
+      </textarea>
+    </div>
+  </body>
+</html>
+