philipwalton · akaustav · Mar 31, 2020 · Feb 8, 2020 · Feb 11, 2020 · Feb 11, 2020
diff --git a/README.md b/README.md
diff --git a/docs/1.1.a-bug.html b/docs/1.1.a-bug.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 1.1.a (bug)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 1.1.a (bug)
+       */
+
+      .FlexContainer {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        margin: 1em;
+        width: 200px;
+      }
+
+      /* Presentational styles */
+      /* not demo related      */
+
+      .FlexItem {
+        background: hsla(0, 0%, 0%, 0.1);
+        margin: 1em;
+        padding: 1em;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="FlexContainer">
+      <div class="FlexItem">
+        ReallyLongWord
+      </div>
+      <div class="FlexItem">
+        AnotherReallyLongWord
+      </div>
+      <div class="FlexItem">
+        YetAnotherReallyLongWord
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/1.1.b-workaround.html b/docs/1.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 1.1.b (workaround)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 1.1.b (workaround)
+       *
+       * 1. Set an explicit `flex-shrink` of 0
+       *    to prevent browsers from letting
+       *    elements shink to smaller than
+       *    their default minimum content
+       *    size.
+       */
+
+      .FlexContainer {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        margin: 1em;
+        width: 200px;
+      }
+
+      .FlexItem {
+        -ms-flex-negative: 0;
+        flex-shrink: 0; /* 1 */
+      }
+
+      /* Presentational styles */
+      /* not demo related      */
+
+      .FlexItem {
+        background: hsla(0, 0%, 0%, 0.1);
+        margin: 1em;
+        padding: 1em;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="FlexContainer">
+      <div class="FlexItem">
+        ReallyLongWord
+      </div>
+      <div class="FlexItem">
+        AnotherReallyLongWord
+      </div>
+      <div class="FlexItem">
+        YetAnotherReallyLongWord
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/1.2.a-bug.html b/docs/1.2.a-bug.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 1.2.a (bug)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 1.2.a (bug)
+       */
+
+      .FlexContainer {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      /* Presentational styles */
+      /* not demo related      */
+
+      .FlexContainer,
+      .FlexItem {
+        background: hsla(0, 0%, 0%, 0.1);
+      }
+
+      .FlexContainer {
+        margin: 1em;
+        padding: 0.5em;
+      }
+
+      .FlexItem {
+        margin: 0.5em;
+        padding: 1em;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="FlexContainer">
+      <div class="FlexItem">
+        Flex item<br>
+        with multiple</br>
+        lines of text
+      </div>
+      <div class="FlexItem">
+        Another flex item<br>
+        with multiple</br>
+        lines of text
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/1.2.b-workaround.html b/docs/1.2.b-workaround.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 1.2.b (workaround)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 1.2.b (workaround)
+       *
+       * 1. Set an explicit `flex-shrink` of 0
+       *    to prevent browsers from letting
+       *    elements shink to smaller than
+       *    their default minimum content
+       *    size.
+       */
+
+      .FlexContainer {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .FlexItem {
+        -ms-flex-negative: 0;
+        flex-shrink: 0; /* 1 */
+      }
+
+      /* Presentational styles */
+      /* not demo related      */
+
+      .FlexContainer,
+      .FlexItem {
+        background: hsla(0, 0%, 0%, 0.1);
+      }
+
+      .FlexContainer {
+        margin: 1em;
+        padding: 0.5em;
+      }
+
+      .FlexItem {
+        margin: 0.5em;
+        padding: 1em;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="FlexContainer">
+      <div class="FlexItem">
+        Flex item<br>
+        with multiple</br>
+        lines of text
+      </div>
+      <div class="FlexItem">
+        Another flex item<br>
+        with multiple</br>
+        lines of text
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/10.1.a-bug.html b/docs/10.1.a-bug.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 10.1.a (bug)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 10.1.a (bug)
+       */
+
+      .OuterFlexContainer {
+        -webkit-box-align: baseline;
+        -ms-flex-align: baseline;
+        align-items: baseline;
+        background: hsla(0, 0%, 0%, 0.1);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        line-height: 1.4;
+        margin: 1em;
+        padding: 1em;
+      }
+
+      .FlexItem {
+        margin-right: 1em;
+      }
+
+      .InnerFlexContainer {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="OuterFlexContainer">
+      <div class="FlexItem">I should be aligned with the first line of text.</div>
+      <div class="FlexItem">
+        <div class="InnerFlexContainer">
+          First line of text.
+        </div>
+        Second line of text.<br />
+        Third line of text.<br />
+        Fourth line of text.
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/10.1.b-workaround.html b/docs/10.1.b-workaround.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 10.1.b (workaround)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 10.1.b (workaround)
+       */
+
+      .OuterFlexContainer {
+        -webkit-box-align: baseline;
+        -ms-flex-align: baseline;
+        align-items: baseline;
+        background: hsla(0, 0%, 0%, 0.1);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        line-height: 1.4;
+        margin: 1em;
+        padding: 1em;
+      }
+
+      .FlexItem {
+        margin-right: 1em;
+      }
+
+      .InnerFlexContainer {
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="OuterFlexContainer">
+      <div class="FlexItem">I should be aligned with the first line of text.</div>
+      <div class="FlexItem">
+        <div class="InnerFlexContainer">
+          First line of text.
+        </div>
+        Second line of text.<br />
+        Third line of text.<br />
+        Fourth line of text.
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/11.1.a-bug.html b/docs/11.1.a-bug.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Flexbug 11.1.a (bug)</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
+    <style>
+      /**
+       * Flexbug demo 11.1.a (bug)
+       */
+
+      .FlexContainer {
+        background: hsla(0, 0%, 0%, 0.1);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        margin: 1em;
+        padding: 1em;
+        width: 600px;
+      }
+
+      .FlexItem {
+        background: hsla(0, 0%, 0%, 0.1);
+        -webkit-box-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        margin: 1em;
+        min-width: 200px;
+        padding: 1em;
+      }
+    </style>
+  </head>
+  <body translate="no">
+    <div class="FlexContainer">
+      <div class="FlexItem">Item 1</div>
+      <div class="FlexItem">Item 2</div>
+      <div class="FlexItem">Item 3</div>
+      <div class="FlexItem">Item 4</div>
+      <div class="FlexItem">Item 5</div>
+      <div class="FlexItem">Item 6</div>
+    </div>
+  </body>
+</html>