Repository: tailwindlabs/tailwindcss (TypeScript)
Date: 2018-09-10 18:41:47+00:00
Task type: Bug Fix

Issue:
Improve IE compatibility for flex-1 utility
IE has trouble understanding our `flex-1` utility, perhaps we should avoid using the `flex: 1` shorthand and be more explicit. After some digging, I wound up on [this stackoverflow page](https://stackoverflow.com/questions/37386244/what-does-flex-1-mean) and am now overwriting my `flex-1` class with the following...

```css
flex: 1 1 0;
```

FWIW, Edge seems to handle the existing utility just fine.
Improve IE compatibility for flex-1 utility
IE has trouble understanding our `flex-1` utility, perhaps we should avoid using the `flex: 1` shorthand and be more explicit. After some digging, I wound up on [this stackoverflow page](https://stackoverflow.com/questions/37386244/what-does-flex-1-mean) and am now overwriting my `flex-1` class with the following...

```css
flex: 1 1 0;
```

FWIW, Edge seems to handle the existing utility just fine.


Issue discussion:
This sounds like [Flexbug #6](https://github.com/philipwalton/flexbugs#flexbug-6).

Speaking of Flexbugs however, the above flex definition you're now using might cause [Flexbug #4](https://github.com/philipwalton/flexbugs#flexbug-4), which you could solve by using this:
```css
flex: 1 1 0%;
```

There's also luisrudge/postcss-flexbugs-fixes which fixes both #4 and #6. You could just wack that into your PostCSS config after Tailwind.
Ah, thank you for the info, I always forget about that awesome repo. Would there be any downside to having our `flex-1` utility written this way out of the box? It seems like a bit of a gotcha to use the shorthand, and then leaving it up to the user to apply this fix. If the maintainers oppose this change though, no worries, go ahead and close this issue.
Would totally accept a PR for this change 👍🏻
On Mon, Sep 10, 2018 at 12:56 PM Scott Bedard <notifications@github.com>
wrote:

> Ah, thank you for the info, I always forget about that awesome repo. Would
> there be any downside to having our flex-1 utility written this way out
> of the box? It seems like a bit of a gotcha to use the shorthand, and then
> leaving it up to the user to apply this fix. If the maintainers oppose this
> change though, no worries, go ahead and close this issue.
>
> —
> You are receiving this because you are subscribed to this thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/tailwindcss/tailwindcss/issues/549#issuecomment-419984161>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AEH3bCJU-anwnONkBGc7bH3tcKShxqnQks5uZpmqgaJpZM4Wf-Ku>
> .
>

This sounds like [Flexbug #6](https://github.com/philipwalton/flexbugs#flexbug-6).

Speaking of Flexbugs however, the above flex definition you're now using might cause [Flexbug #4](https://github.com/philipwalton/flexbugs#flexbug-4), which you could solve by using this:
```css
flex: 1 1 0%;
```

There's also luisrudge/postcss-flexbugs-fixes which fixes both #4 and #6. You could just wack that into your PostCSS config after Tailwind.
Ah, thank you for the info, I always forget about that awesome repo. Would there be any downside to having our `flex-1` utility written this way out of the box? It seems like a bit of a gotcha to use the shorthand, and then leaving it up to the user to apply this fix. If the maintainers oppose this change though, no worries, go ahead and close this issue.
Would totally accept a PR for this change 👍🏻
On Mon, Sep 10, 2018 at 12:56 PM Scott Bedard <notifications@github.com>
wrote:

> Ah, thank you for the info, I always forget about that awesome repo. Would
> there be any downside to having our flex-1 utility written this way out
> of the box? It seems like a bit of a gotcha to use the shorthand, and then
> leaving it up to the user to apply this fix. If the maintainers oppose this
> change though, no worries, go ahead and close this issue.
>
> —
> You are receiving this because you are subscribed to this thread.
> Reply to this email directly, view it on GitHub
> <https://github.com/tailwindcss/tailwindcss/issues/549#issuecomment-419984161>,
> or mute the thread
> <https://github.com/notifications/unsubscribe-auth/AEH3bCJU-anwnONkBGc7bH3tcKShxqnQks5uZpmqgaJpZM4Wf-Ku>
> .
>


Solution patch:
diff --git a/src/generators/flexbox.js b/src/generators/flexbox.js
--- a/src/generators/flexbox.js
+++ b/src/generators/flexbox.js
@@ -90,13 +90,13 @@ export default function() {
       'align-content': 'space-around',
     },
     'flex-1': {
-      flex: '1',
+      flex: '1 1 0%',
     },
     'flex-auto': {
-      flex: 'auto',
+      flex: '1 1 auto',
     },
     'flex-initial': {
-      flex: 'initial',
+      flex: '0 1 auto',
     },
     'flex-none': {
       flex: 'none',


Test patch:
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -2963,15 +2963,15 @@ table {
 }
 
 .flex-1 {
-  flex: 1;
+  flex: 1 1 0%;
 }
 
 .flex-auto {
-  flex: auto;
+  flex: 1 1 auto;
 }
 
 .flex-initial {
-  flex: initial;
+  flex: 0 1 auto;
 }
 
 .flex-none {
@@ -8548,15 +8548,15 @@ table {
   }
 
   .sm\:flex-1 {
-    flex: 1;
+    flex: 1 1 0%;
   }
 
   .sm\:flex-auto {
-    flex: auto;
+    flex: 1 1 auto;
   }
 
   .sm\:flex-initial {
-    flex: initial;
+    flex: 0 1 auto;
   }
 
   .sm\:flex-none {
@@ -14118,15 +14118,15 @@ table {
   }
 
   .md\:flex-1 {
-    flex: 1;
+    flex: 1 1 0%;
   }
 
   .md\:flex-auto {
-    flex: auto;
+    flex: 1 1 auto;
   }
 
   .md\:flex-initial {
-    flex: initial;
+    flex: 0 1 auto;
   }
 
   .md\:flex-none {
@@ -19688,15 +19688,15 @@ table {
   }
 
   .lg\:flex-1 {
-    flex: 1;
+    flex: 1 1 0%;
   }
 
   .lg\:flex-auto {
-    flex: auto;
+    flex: 1 1 auto;
   }
 
   .lg\:flex-initial {
-    flex: initial;
+    flex: 0 1 auto;
   }
 
   .lg\:flex-none {
@@ -25258,15 +25258,15 @@ table {
   }
 
   .xl\:flex-1 {
-    flex: 1;
+    flex: 1 1 0%;
   }
 
   .xl\:flex-auto {
-    flex: auto;
+    flex: 1 1 auto;
   }
 
   .xl\:flex-initial {
-    flex: initial;
+    flex: 0 1 auto;
   }
 
   .xl\:flex-none {