@@ -131,9 +131,9 @@ In IE 10-11, `min-height` declarations on flex containers work to size the conta
#### Workaround
-By far the most common element to apply `min-height` to is the body element, and usually you're setting it to `100%` (or `100vh`). Since the body element will never have any content below it, and since having a vertical scroll bar appear when there's a lot of content on the page is usually the desired behavior, substituting `height` for `min-height` will almost always work as shown in demo [3.1.b](https://codepen.io/philipwalton/pen/KwNvLo).
+By far the most common element to apply `min-height` to is the body element, and usually you're setting it to `100%` (or `100vh`). Since the body element will never have any content below it, and since having a vertical scroll bar appear when there's a lot of content on the page is usually the desired behavior, substituting `height` for `min-height` will almost always work as shown in demo [3.1.b](https://philipwalton.github.io/flexbugs/3.1.b-workaround.html).
-For cases where `min-height` is required, the workaround is to add a wrapper element around the flex container that is itself a flex container in the column direction. For some reason nested flex containers are not affected by this bug. Demo [3.2.a](https://codepen.io/philipwalton/pen/VYmbmj) shows a visual design where `min-height` is required, and demo [3.2.b](https://codepen.io/philipwalton/pen/JdvdJE) shows how this bug can be avoided with a wrapper element.
+For cases where `min-height` is required, the workaround is to add a wrapper element around the flex container that is itself a flex container in the column direction. For some reason nested flex containers are not affected by this bug. Demo [3.2.a](https://philipwalton.github.io/flexbugs/3.2.a-bug.html) shows a visual design where `min-height` is required, and demo [3.2.b](https://philipwalton.github.io/flexbugs/3.2.b-workaround.html) shows how this bug can be avoided with a wrapper element.
@@ -150,8 +150,8 @@ _`flex` shorthand declarations with unitless `flex-basis` values are ignored_
@@ -195,7 +195,7 @@ The [March 2014 spec](http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#min-s
> On a flex item whose overflow is not visible, this [auto] keyword specifies as the minimum size the smaller of: (a) the min-content size, or (b) the computed width/height, if that value is definite.
-Demo [5.1.a](https://codepen.io/philipwalton/pen/LEbQON) contains an image whose height is 200 pixels and whose width is 500 pixels. Its container, however, is only 300 pixels wide, so after the image is scaled to fit into that space, its computed height should only be 120 pixels. The text quoted above does not make it clear as to whether the flex item's min-content size should be based the image's actual height or scaled height.
+Demo [5.1.a](https://philipwalton.github.io/flexbugs/5.1.a-bug.html) contains an image whose height is 200 pixels and whose width is 500 pixels. Its container, however, is only 300 pixels wide, so after the image is scaled to fit into that space, its computed height should only be 120 pixels. The text quoted above does not make it clear as to whether the flex item's min-content size should be based the image's actual height or scaled height.
The [most recent spec](http://dev.w3.org/csswg/css-flexbox/#min-size-auto) has resolved this ambiguity in favor of using sizes that will preserve an element's intrinsic aspect ratio.
@@ -218,10 +218,10 @@ _The default `flex` value has changed_
@@ -261,7 +261,7 @@ This bug can manifest itself in two ways: when not setting any flex values or wh
#### Workaround
-If you have to support IE 10, the best solution is to *always* set an explicit `flex-shrink` value on all of your flex items, or to always use the longhand form (rather than the shorthand) in `flex` declarations to avoid the gotchas shown in the table above. Demo [6.1.a](https://codepen.io/philipwalton/pen/myOYqW) shows how not setting any flexibility properties causes an error, and demo [6.2.a](https://codepen.io/philipwalton/pen/zvvQdB) shows how using `flex: 1` can have the same problem.
+If you have to support IE 10, the best solution is to *always* set an explicit `flex-shrink` value on all of your flex items, or to always use the longhand form (rather than the shorthand) in `flex` declarations to avoid the gotchas shown in the table above. Demo [6.1.a](https://philipwalton.github.io/flexbugs/6.1.a-bug.html) shows how not setting any flexibility properties causes an error, and demo [6.2.a](https://philipwalton.github.io/flexbugs/6.2.a-bug.html) shows how using `flex: 1` can have the same problem.
@@ -278,9 +278,9 @@ _`flex-basis` doesn't account for `box-sizing: border-box`_
@@ -288,14 +288,14 @@ _`flex-basis` doesn't account for `box-sizing: border-box`_
An explicit `flex-basis` value (i.e., any value other than `auto`) is supposed to act just like `width` or `height`. It determines the initial size of a flex item and then the other flexibility properties allow it to grow or shrink accordingly.
-IE 10-11 always assume a content box model when using `flex-basis` to determine a flex item's size, even if that item is set to `box-sizing: border-box`. Demo [7.1.a](https://codepen.io/philipwalton/pen/JoWjyb) shows that an item with a `flex-basis` value of `100%` will overflow its container by the amount of its border plus its padding.
+IE 10-11 always assume a content box model when using `flex-basis` to determine a flex item's size, even if that item is set to `box-sizing: border-box`. Demo [7.1.a](https://philipwalton.github.io/flexbugs/7.1.a-bug.html) shows that an item with a `flex-basis` value of `100%` will overflow its container by the amount of its border plus its padding.
#### Workaround
There are two ways to work around this bug. The first requires no additional markup, but the second is slightly more flexible:
-1. Instead of setting an explicit `flex-basis` value, use `auto`, and then set an explicit width or height. Demo [7.1.b](https://codepen.io/philipwalton/pen/XJMWem) shows this.
-2. Use a wrapper element that contains no border or padding so it works with the content box model. Demo [7.1.c](https://codepen.io/philipwalton/pen/ZYLdqb) show this.
+1. Instead of setting an explicit `flex-basis` value, use `auto`, and then set an explicit width or height. Demo [7.1.b](https://philipwalton.github.io/flexbugs/7.1.b-workaround.html) shows this.
+2. Use a wrapper element that contains no border or padding so it works with the content box model. Demo [7.1.c](https://philipwalton.github.io/flexbugs/7.1.c-workaround.html) show this.
@@ -312,29 +312,29 @@ _`flex-basis` doesn't support `calc()`_
-IE 10-11 ignore `calc()` functions used in `flex` shorthand declarations. Demo [8.1.a](https://codepen.io/philipwalton/pen/ogBrye) shows `flex: 0 0 calc(100%/3)` not working in IE.
+IE 10-11 ignore `calc()` functions used in `flex` shorthand declarations. Demo [8.1.a](https://philipwalton.github.io/flexbugs/8.1.a-bug.html) shows `flex: 0 0 calc(100%/3)` not working in IE.
-In IE 10, `calc()` functions don't even work in longhand `flex-basis` declarations (though this does work in IE 11). Demo [8.2.a](https://codepen.io/philipwalton/pen/VYJgJo) shows `flex-basis: calc(100%/3)` not working in IE 10.
+In IE 10, `calc()` functions don't even work in longhand `flex-basis` declarations (though this does work in IE 11). Demo [8.2.a](https://philipwalton.github.io/flexbugs/8.2.a-bug.html) shows `flex-basis: calc(100%/3)` not working in IE 10.
#### Workaround
-Since this bug only affects the `flex` shorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually. Demo [8.1.b](https://codepen.io/philipwalton/pen/bNgPKz) offers an example of this.
+Since this bug only affects the `flex` shorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually. Demo [8.1.b](https://philipwalton.github.io/flexbugs/8.1.b-workaround.html) offers an example of this.
-If you need to support IE 10 as well, then you'll need to fall back to setting `width` or `height` (depending on the container's `flex-direction` property). You can do this by setting a `flex-basis` value of `auto`, which will instruct the browser to use the element's [main size](http://dev.w3.org/csswg/css-flexbox/#box-model) property (i.e., its `width` or `height`). Demo [8.2.b](https://codepen.io/philipwalton/pen/pvXGmW) offers an example of this.
+If you need to support IE 10 as well, then you'll need to fall back to setting `width` or `height` (depending on the container's `flex-direction` property). You can do this by setting a `flex-basis` value of `auto`, which will instruct the browser to use the element's [main size](http://dev.w3.org/csswg/css-flexbox/#box-model) property (i.e., its `width` or `height`). Demo [8.2.b](https://philipwalton.github.io/flexbugs/8.2.b-workaround.html) offers an example of this.
@@ -352,11 +352,11 @@ _Some HTML elements can't be flex containers_
Firefox (fixed in 52)
@@ -415,7 +415,7 @@ _`align-items: baseline` doesn't work with nested flex containers_
-In Firefox, nested flex containers don't contribute to the baseline that other flex items should align themselves to. Demo [10.1.a](https://codepen.io/philipwalton/pen/vOOejZ) shows the line on the left incorrectly aligning itself to the second line of text on the right. It should be aligned to the first line of text, which is the inner flex container.
+In Firefox, nested flex containers don't contribute to the baseline that other flex items should align themselves to. Demo [10.1.a](https://philipwalton.github.io/flexbugs/10.1.a-bug.html) shows the line on the left incorrectly aligning itself to the second line of text on the right. It should be aligned to the first line of text, which is the inner flex container.
#### Workaround
@@ -437,8 +437,8 @@ _Min and max size declarations are ignored when wrapping flex items_
@@ -449,13 +449,13 @@ _Min and max size declarations are ignored when wrapping flex items_
Safari uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's `flex-basis` value, or its width if the flex basis is set to `auto`.
-This is problematic when using the `flex: 1` shorthand because that sets the flex basis to `0%`, and an infinite number of flex items could fit on a single line if the browser thinks their widths are all zero. Demo [11.1.a](https://codepen.io/philipwalton/pen/BNrGwN) show an example of this happening.
+This is problematic when using the `flex: 1` shorthand because that sets the flex basis to `0%`, and an infinite number of flex items could fit on a single line if the browser thinks their widths are all zero. Demo [11.1.a](https://philipwalton.github.io/flexbugs/11.1.a-bug.html) show an example of this happening.
This is also problematic when creating fluid layouts where you want your flex items to be no bigger than X but no smaller than Y. Since Safari ignores those values when determining how many items fit on a line, that strategy won't work.
#### Workaround
-The only way to avoid this issue is to make sure to set the flex basis to a value that is always going to be between (inclusively) the min and max size declarations. If using either a min or a max size declaration, set the flex basis to whatever that value is, if you're using both a min *and* a max size declaration, set the flex basis to a value that is somewhere in that range. This sometimes requires using percentage values or media queries to cover all possible scenarios. Demo [11.1.b](https://codepen.io/philipwalton/pen/RPMqjz) shows an example of setting the flex basis to the same value as the min width to workaround this bug in Safari.
+The only way to avoid this issue is to make sure to set the flex basis to a value that is always going to be between (inclusively) the min and max size declarations. If using either a min or a max size declaration, set the flex basis to whatever that value is, if you're using both a min *and* a max size declaration, set the flex basis to a value that is somewhere in that range. This sometimes requires using percentage values or media queries to cover all possible scenarios. Demo [11.1.b](https://philipwalton.github.io/flexbugs/11.1.b-workaround.html) shows an example of setting the flex basis to the same value as the min width to workaround this bug in Safari.
@@ -472,8 +472,8 @@ _Inline elements are not treated as flex-items_
@@ -483,7 +483,7 @@ Inline elements, including `::before` and `::after` pseudo-elements, are not tre
#### Workaround
-This issue can be avoided by adding a non-inline display value to the items, e.g. `block`, `inline-block`, `flex`, etc. Demo [12.1.b](https://codepen.io/philipwalton/pen/NqLoNp) shows an example of this working in IE 10-11.
+This issue can be avoided by adding a non-inline display value to the items, e.g. `block`, `inline-block`, `flex`, etc. Demo [12.1.b](https://philipwalton.github.io/flexbugs/12.1.b-workaround.html) shows an example of this working in IE 10-11.
@@ -500,18 +500,18 @@ _Importance is ignored on flex-basis when using flex shorthand_
-When applying `!important` to a `flex` shorthand declaration, IE 10 applies `!important` to the `flex-grow` and `flex-shrink` parts but not to the `flex-basis` part. Demo [13.1.a](https://codepen.io/philipwalton/pen/ZbRoYw) shows an example of a declaration with `!important` not overriding another declaration in IE 10.
+When applying `!important` to a `flex` shorthand declaration, IE 10 applies `!important` to the `flex-grow` and `flex-shrink` parts but not to the `flex-basis` part. Demo [13.1.a](https://philipwalton.github.io/flexbugs/13.1.a-bug.html) shows an example of a declaration with `!important` not overriding another declaration in IE 10.
#### Workaround
-If you need the `flex-basis` part of your `flex` declaration to be `!important` and you have to support IE 10, make sure to include a `flex-basis` declaration separately. Demo [13.1.b](https://codepen.io/philipwalton/pen/rOKvNb) shows an example of this working in IE 10.
+If you need the `flex-basis` part of your `flex` declaration to be `!important` and you have to support IE 10, make sure to include a `flex-basis` declaration separately. Demo [13.1.b](https://philipwalton.github.io/flexbugs/13.1.b-workaround.html) shows an example of this working in IE 10.
@@ -529,9 +529,9 @@ _Shrink-to-fit containers with `flex-flow: column wrap` do not contain their ite
Chrome
@@ -549,13 +549,13 @@ _Shrink-to-fit containers with `flex-flow: column wrap` do not contain their ite
If you float a flex container, use `inline-flex`, or absolutely position it, the size of the container becomes determined by its content (a.k.a shrink-to-fit).
-When using `flex-flow: column wrap`, some browsers do not properly size the container based on its content, and there is unwanted overflow. Demo [14.1.a](https://codepen.io/philipwalton/pen/vWbdZW) shows an example of this.
+When using `flex-flow: column wrap`, some browsers do not properly size the container based on its content, and there is unwanted overflow. Demo [14.1.a](https://philipwalton.github.io/flexbugs/14.1.a-bug.html) shows an example of this.
#### Workaround
-If your container has a fixed height (usually the case when you enable wrapping), you avoid this bug by using `flex-flow: row wrap` (note `row` instead of `column`) and fake the column behavior by updating the container's [writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) (and reseting it on the items). Demo [14.1.b](https://codepen.io/philipwalton/pen/RjvQgx) shows an example of this working in all modern browsers.
+If your container has a fixed height (usually the case when you enable wrapping), you avoid this bug by using `flex-flow: row wrap` (note `row` instead of `column`) and fake the column behavior by updating the container's [writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) (and reseting it on the items). Demo [14.1.b](https://philipwalton.github.io/flexbugs/14.1.b-workaround.html) shows an example of this working in all modern browsers.
-**Note:** To use this workaround in Safari 10 you may need to set explicit dimensions on the flex items. Demo [14.1.c](https://codepen.io/philipwalton/pen/MOxQBg) shows an example of how this can be needed in Safari 10.
+**Note:** To use this workaround in Safari 10 you may need to set explicit dimensions on the flex items. Demo [14.1.c](https://philipwalton.github.io/flexbugs/14.1.c-workaround.html) shows an example of how this can be needed in Safari 10.
### Flexbug #15
@@ -570,8 +570,8 @@ _Column flex items ignore `margin: auto` on the cross axis_
Internet Explorer 10-11 (fixed in Edge)
@@ -584,11 +584,11 @@ _Column flex items ignore `margin: auto` on the cross axis_
`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://codepen.io/philipwalton/pen/RjdvWK) shows an example of this.
+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.
#### Workaround
-If you're using `margin: auto` to center items, you can achieve the same effect by setting `align-self: center` on each item with `margin: auto` (or `align-items: center` on the container). Demo [15.1.b](https://codepen.io/philipwalton/pen/BmbMPP) shows this working in IE 10-11.
+If you're using `margin: auto` to center items, you can achieve the same effect by setting `align-self: center` on each item with `margin: auto` (or `align-items: center` on the container). Demo [15.1.b](https://philipwalton.github.io/flexbugs/15.1.b-workaround.html) shows this working in IE 10-11.
### Flexbug #16
@@ -603,8 +603,8 @@ _`flex-basis` cannot be animated_
Internet Explorer 10-11
@@ -616,11 +616,11 @@ _`flex-basis` cannot be animated_
-In some browsers, CSS animations involving the `flex-basis` property are ignored. Demo [16.1.a](https://codepen.io/philipwalton/pen/yPrRax) shows an example of this.
+In some browsers, CSS animations involving the `flex-basis` property are ignored. Demo [16.1.a](https://philipwalton.github.io/flexbugs/16.1.a-bug.html) shows an example of this.
#### Workaround
-Since the `flex-basis` property is effectively just a substitute for the container's size property along the main axis (`width` for rows and `height` for columns), you can achieve the effect of animating `flex-basis` by using a `flex-basis` value of `auto` and instead animating either the `width` or `height` instead. Demo [16.1.b](https://codepen.io/philipwalton/pen/MORPjP) shows how you can achieve the same effect from demo [16.1.a](https://codepen.io/philipwalton/pen/yPrRax) by animating `width` instead of `flex-basis`.
+Since the `flex-basis` property is effectively just a substitute for the container's size property along the main axis (`width` for rows and `height` for columns), you can achieve the effect of animating `flex-basis` by using a `flex-basis` value of `auto` and instead animating either the `width` or `height` instead. Demo [16.1.b](https://philipwalton.github.io/flexbugs/16.1.b-workaround.html) shows how you can achieve the same effect from demo [16.1.a](https://philipwalton.github.io/flexbugs/16.1.a-bug.html) by animating `width` instead of `flex-basis`.
### Flexbug #17
@@ -634,8 +634,8 @@ _Flex items are not correctly justified when `max-width` is used_
Internet Explorer 11
@@ -643,7 +643,7 @@ _Flex items are not correctly justified when `max-width` is used_
-In IE 11 the free space between or around flex items (as per their container's `justify-content` property) is not correctly calculated if a max-size property is used (`max-width` in the row direction, `max-height` in the column direction). Demo [17.1.a](https://codepen.io/philipwalton/pen/vWMbgK) shows an example of this.
+In IE 11 the free space between or around flex items (as per their container's `justify-content` property) is not correctly calculated if a max-size property is used (`max-width` in the row direction, `max-height` in the column direction). Demo [17.1.a](https://philipwalton.github.io/flexbugs/17.1.a-bug.html) shows an example of this.
#### Workaround
@@ -665,12 +665,12 @@ In other words, the following two declarations will both render an item with a f
}
```
-Demo [17.1.b](https://codepen.io/philipwalton/pen/OOGdmj) shows this working in IE 11.
+Demo [17.1.b](https://philipwalton.github.io/flexbugs/17.1.b-workaround.html) shows this working in IE 11.
## Acknowledgments
-Flexbugs was created as a follow-up to the article [Normalizing Cross-Browser Flexbox Bugs](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/). It's maintained by [@philwalton](https://twitter.com/philwalton) and [@gregwhitworth](https://twitter.com/gregwhitworth). If you have any questions or would like to get involved, please feel free to reach out to either of us on Twitter.
+Flexbugs was created as a follow-up to the article [Normalizing Cross-Browser Flexbox Bugs](http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/). It is maintained by [@philwalton](https://twitter.com/philwalton), [@gregwhitworth](https://twitter.com/gregwhitworth) and [@akaustav](https://twitter.com/akaustav). If you have any questions or would like to get involved, please feel free to reach out to one of us on Twitter.
## Contributing
diff --git a/docs/1.1.a-bug.html b/docs/1.1.a-bug.html
new file mode 100644
index 0000000..af8ff26
--- /dev/null
+++ b/docs/1.1.a-bug.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Flexbug 1.1.a (bug)
+
+
+
+
+
Change the size of the window to see the sticky footer in action.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non pulvinar mi, quis aliquam ligula. Aenean cursus sapien augue, vel porta arcu
+ aliquet ut. Cras eu massa eu libero porttitor commodo. Morbi non ante luctus, finibus felis sit amet, dignissim augue. Sed consectetur iaculis nisi
+ sed vestibulum. Integer accumsan auctor justo sed eleifend. Suspendisse id diam lectus. Nullam et volutpat dui. Pellentesque a mauris ac ante viverra
+ elementum. Curabitur tincidunt ac ex ut lobortis. In eget ligula ut sapien convallis feugiat. Duis vehicula eget elit at consectetur. Aliquam pharetra
+ maximus consequat. Fusce mattis vel velit non cursus. Integer sed metus libero.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non pulvinar mi, quis aliquam ligula. Aenean cursus sapien augue, vel porta arcu
+ aliquet ut. Cras eu massa eu libero porttitor commodo. Morbi non ante luctus, finibus felis sit amet, dignissim augue. Sed consectetur iaculis nisi
+ sed vestibulum. Integer accumsan auctor justo sed eleifend. Suspendisse id diam lectus. Nullam et volutpat dui. Pellentesque a mauris ac ante viverra
+ elementum. Curabitur tincidunt ac ex ut lobortis. In eget ligula ut sapien convallis feugiat. Duis vehicula eget elit at consectetur. Aliquam pharetra
+ maximus consequat. Fusce mattis vel velit non cursus. Integer sed metus libero.
+
Change the size of the window to see the sticky footer in action.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non pulvinar mi, quis aliquam ligula. Aenean cursus sapien augue, vel porta arcu
+ aliquet ut. Cras eu massa eu libero porttitor commodo. Morbi non ante luctus, finibus felis sit amet, dignissim augue. Sed consectetur iaculis nisi
+ sed vestibulum. Integer accumsan auctor justo sed eleifend. Suspendisse id diam lectus. Nullam et volutpat dui. Pellentesque a mauris ac ante viverra
+ elementum. Curabitur tincidunt ac ex ut lobortis. In eget ligula ut sapien convallis feugiat. Duis vehicula eget elit at consectetur. Aliquam pharetra
+ maximus consequat. Fusce mattis vel velit non cursus. Integer sed metus libero.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non pulvinar mi, quis aliquam ligula. Aenean cursus sapien augue, vel porta arcu
+ aliquet ut. Cras eu massa eu libero porttitor commodo. Morbi non ante luctus, finibus felis sit amet, dignissim augue. Sed consectetur iaculis nisi
+ sed vestibulum. Integer accumsan auctor justo sed eleifend. Suspendisse id diam lectus. Nullam et volutpat dui. Pellentesque a mauris ac ante viverra
+ elementum. Curabitur tincidunt ac ex ut lobortis. In eget ligula ut sapien convallis feugiat. Duis vehicula eget elit at consectetur. Aliquam pharetra
+ maximus consequat. Fusce mattis vel velit non cursus. Integer sed metus libero.
+
+ When content is sparse,
+ I should be centered.
+
+
+
+
+
+
+
+ When there's lots of content—more content than can fit inside the flex container—the container should expand vertically to accomodate.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non pulvinar mi, quis aliquam ligula. Aenean cursus sapien augue, vel porta arcu
+ aliquet ut. Cras eu massa eu libero porttitor commodo. Morbi non ante luctus, finibus felis sit amet, dignissim augue. Sed consectetur iaculis nisi
+ sed vestibulum. Integer accumsan auctor justo sed eleifend. Suspendisse id diam lectus. Nullam et volutpat dui. Pellentesque a mauris ac ante viverra
+ elementum. Curabitur tincidunt ac ex ut lobortis. In eget ligula ut sapien convallis feugiat. Duis vehicula eget elit at consectetur. Aliquam pharetra
+ maximus consequat. Fusce mattis vel velit non cursus. Integer sed metus libero. Fusce leo est, suscipit id velit eu, egestas viverra nibh. Duis sed
+ orci augue. Vivamus varius consectetur gravida. Sed id faucibus felis. Morbi a diam nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+ When content is sparse,
+ I should be centered.
+
+
+
+
+
+
+
+
+
+ When there's lots of content—more content than can fit inside the flex container—the container should expand vertically to accomodate.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non pulvinar mi, quis aliquam ligula. Aenean cursus sapien augue, vel porta arcu
+ aliquet ut. Cras eu massa eu libero porttitor commodo. Morbi non ante luctus, finibus felis sit amet, dignissim augue. Sed consectetur iaculis nisi
+ sed vestibulum. Integer accumsan auctor justo sed eleifend. Suspendisse id diam lectus. Nullam et volutpat dui. Pellentesque a mauris ac ante viverra
+ elementum. Curabitur tincidunt ac ex ut lobortis. In eget ligula ut sapien convallis feugiat. Duis vehicula eget elit at consectetur. Aliquam pharetra
+ maximus consequat. Fusce mattis vel velit non cursus. Integer sed metus libero. Fusce leo est, suscipit id velit eu, egestas viverra nibh. Duis sed
+ orci augue. Vivamus varius consectetur gravida. Sed id faucibus felis. Morbi a diam nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..e42b4df
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,5 @@
+## Flexbugs Static Files
+
+This folder primarily houses static html files containing [bugs and their workarounds](https://github.com/philipwalton/flexbugs#the-bugs-and-their-workarounds) for hosting on GitHub pages. You can view their source code in this folder [here](https://github.com/philipwalton/flexbugs/tree/master/docs).
+
+In order to ensure that the original documentation stays on GitHub [README](https://github.com/philipwalton/flexbugs#flexbugs) (and not on GitHub pages), absolute links have been used (instead of relative links) wherever applicable.
diff --git a/docs/_config.yml b/docs/_config.yml
new file mode 100644
index 0000000..c741881
--- /dev/null
+++ b/docs/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-slate
\ No newline at end of file