Repository: philipwalton/flexbugs
Branch: master
Commit: 36a467f919e8
Files: 52
Total size: 102.4 KB
Directory structure:
gitextract_qro50g1q/
├── .github/
│ └── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
└── docs/
├── 1.1.a-bug.html
├── 1.1.b-workaround.html
├── 1.2.a-bug.html
├── 1.2.b-workaround.html
├── 10.1.a-bug.html
├── 10.1.b-workaround.html
├── 11.1.a-bug.html
├── 11.1.b-workaround.html
├── 12.1.a-bug.html
├── 12.1.b-workaround.html
├── 13.1.a-bug.html
├── 13.1.b-workaround.html
├── 14.1.a-bug.html
├── 14.1.b-workaround.html
├── 14.1.c-workaround.html
├── 15.1.a-bug.html
├── 15.1.b-workaround.html
├── 16.1.a-bug.html
├── 16.1.b-workaround.html
├── 17.1.a-bug.html
├── 17.1.b-workaround.html
├── 2.1.a-bug.html
├── 2.1.b-workaround.html
├── 3.1.a-bug.html
├── 3.1.b-workaround.html
├── 3.2.a-bug.html
├── 3.2.b-workaround.html
├── 4.1.a-bug.html
├── 4.1.b-workaround.html
├── 5.1.a-bug.html
├── 5.1.b-workaround.html
├── 6.1.a-bug.html
├── 6.1.b-workaround.html
├── 6.2.a-bug.html
├── 6.2.b-workaround.html
├── 7.1.a-bug.html
├── 7.1.b-workaround.html
├── 7.1.c-workaround.html
├── 8.1.a-bug.html
├── 8.1.b-workaround.html
├── 8.2.a-bug.html
├── 8.2.b-workaround.html
├── 9.1.a-bug.html
├── 9.1.b-workaround.html
├── 9.2.a-bug.html
├── 9.2.b-workaround.html
├── 9.3.a-bug.html
├── README.md
└── _config.yml
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/ISSUE_TEMPLATE.md
================================================
### Important! Please read before opening an issue:
- This repo **is not** for reporting Flexbox bugs in browsers. Please report those directly to the browsers themselves. Here's a link to all major browser bug trackers: https://developers.google.com/web/feedback/#reporting-bugs
- This repo **is not** for asking Flexbox quesions, please use Stack Overflow for that.
- This repo **is** for reporting cross-browser workarounds to already-reported Flexbox bugs. Please only open an issue if you know of a good, cross-browser workaround and the bug has already been reported to all affected browsers.
### Things to include in your issue:
- Please include links to the bugs for each affected browser's bug tracker.
- Please include a live demo ([CodePen](https://codepen.io/) or [JSBin](https://jsbin.com)) showing both the issue and the workaround.
- Please clearly explain exactly what the expected behavior is and what's not happening in the affected browser(s). It's not always immediately obvious from looking at a demo what is wrong.
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2015 Philip Walton
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
:warning: _**UPDATE:** this repo is no longer maintained, as most of the bugs listed here are fixed in modern browsers._
Flexbugs
========
This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.
As the spec continues to evolve and vendors nail down their implementations, this repo will be updated with newly discovered issues and remove old issues as they're fixed or become obsolete. If you discover a bug that's not listed here, please [report it](#contributing) so everyone else can benefit.
## The bugs and their workarounds
1. [Minimum content sizing of flex items not honored](#flexbug-1)
2. [Column flex items set to `align-items: center` overflow their container](#flexbug-2)
3. [`min-height` on a flex container won't apply to its flex items](#flexbug-3)
4. [`flex` shorthand declarations with unitless `flex-basis` values are ignored](#flexbug-4)
5. [Column flex items don't always preserve intrinsic aspect ratios](#flexbug-5)
6. [The default `flex` value has changed](#flexbug-6)
7. [`flex-basis` doesn't account for `box-sizing: border-box`](#flexbug-7)
8. [`flex-basis` doesn't support `calc()`](#flexbug-8)
9. [Some HTML elements can't be flex containers](#flexbug-9)
10. [`align-items: baseline` doesn't work with nested flex containers](#flexbug-10)
11. [Min and max size declarations are ignored when wrapping flex items](#flexbug-11)
12. [Inline elements are not treated as flex-items](#flexbug-12)
13. [Importance is ignored on flex-basis when using flex shorthand](#flexbug-13)
14. [Shrink-to-fit containers with `flex-flow: column wrap` do not contain their items](#flexbug-14)
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)
<!-- To preserve old links -->
<a name="1-minimum-content-sizing-of-flex-items-not-honored"><a>
### Flexbug #1
_Minimum content sizing of flex items not honored_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/1.1.a-bug.html">1.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/1.1.b-workaround.html">1.1.b</a> – <em>workaround</em><br>
<a href="https://philipwalton.github.io/flexbugs/1.2.a-bug.html">1.2.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/1.2.b-workaround.html">1.2.b</a> – <em>workaround</em>
</td>
<td>
Chrome (fixed in 72)<br>
Opera (fixed in 60)<br>
Safari (fixed in 10)
</td>
<td>
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=426898">Chrome #426898 (fixed)</a><br>
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=596743">Chrome #596743 (fixed)</a></br>
<a href="https://bugs.webkit.org/show_bug.cgi?id=146020">Safari #146020 (fixed)</a>
</td>
</tr>
</table>
When flex items are too big to fit inside their container, those items are instructed (by the flex layout algorithm) to shrink, proportionally, according to their `flex-shrink` property. But contrary to what most browsers allow, they're *not* supposed to shrink indefinitely. They must always be at least as big as their minimum height or width properties declare, and if no minimum height or width properties are set, their minimum size should be the default minimum size of their content.
According to the [current flexbox specification](http://www.w3.org/TR/css-flexbox/#flex-common):
> By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.
#### Workaround
The flexbox spec defines an initial `flex-shrink` value of `1` but says items should not shrink below their default minimum content size. You can usually get this same behavior by setting a `flex-shrink` value of `0` (instead of the default `1`) and a `flex-basis` value of `auto`. That will cause the flex item to be at least as big as its width or height (if declared) or its default content size.
<!-- To preserve old links -->
<a name="2-column-flex-items-set-to-align-itemscenter-overflow-their-container"><a>
### Flexbug #2
_Column flex items set to `align-items: center` 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/2.1.a-bug.html">2.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/2.1.b-workaround.html">2.1.b</a> – <em>workaround</em>
</td>
<td>
Internet Explorer 10-11 (fixed in Edge)
</td>
</tr>
</table>
When using `align-items: center` on a flex container in the column direction, the contents of flex item, if too big, will overflow their container in IE 10-11.
#### Workaround
Most of the time, this can be fixed by simply setting `max-width: 100%` on the flex item. If the flex item has a padding or border set, you'll also need to make sure to use `box-sizing: border-box` to account for that space. If the flex item has a margin, using `box-sizing` alone will not work, so you may need to use a container element with padding instead.
<!-- To preserve old links -->
<a name="3-min-height-on-a-flex-container-wont-apply-to-its-flex-items"><a>
### Flexbug #3
_`min-height` on a flex container won't apply to its flex items_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/3.1.a-bug.html">3.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/3.1.b-workaround.html">3.1.b</a> – <em>workaround</em><br>
<a href="https://philipwalton.github.io/flexbugs/3.2.a-bug.html">3.2.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/3.2.b-workaround.html">3.2.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10-11 (fixed in Edge)</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>
In order for flex items to size and position themselves, they need to know how big their containers are. For example, if a flex item is supposed to be vertically centered, it needs to know how tall its parent is. The same is true when flex items are told to grow to fill the remaining empty space.
In IE 10-11, `min-height` declarations on flex containers work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.
#### 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://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://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.
<!-- To preserve old links -->
<a name="4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored"><a>
### Flexbug #4
_`flex` shorthand declarations with unitless `flex-basis` values are ignored_
<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/4.1.a-bug.html">4.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/4.1.b-workaround.html">4.1.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10-11 (fixed in Edge)</td>
</tr>
</table>
Prior to the release of IE 10, the [flexbox spec at the time](http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flexibility) stated that a flexbox item's preferred size required a unit when using the `flex` shorthand:
> If the <preferred-size> is ‘0’, it must be specified with a unit (like ‘0px’) to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error.
This is no longer true in the spec, but IE 10-11 still treat it as true. If you use the declaration `flex: 1 0 0` in one of these browsers, it will be an error and the entire rule (including all the flexibility properties) will be ignored.
#### Workaround
When using the `flex` shorthand, always include a unit in the `flex-basis` portion. For example: `1 0 0%`.
**Important:** using a `flex` value of something like `1 0 0px` can still be a problem because many CSS minifiers will convert `0px` to `0`. To avoid this, make sure to use `0%` instead of `0px` since most minifiers won't touch percentage values for other reasons.
<!-- To preserve old links -->
<a name="5-column-flex-items-dont-always-preserve-intrinsic-aspect-ratios"><a>
### Flexbug #5
_Column flex items don't always preserve intrinsic aspect ratios_
<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/5.1.a-bug.html">5.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/5.1.b-workaround.html">5.1.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10-11 (fixed in Edge)</td>
</tr>
</table>
The [March 2014 spec](http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#min-size-auto) has the following to say about how size determinations are made for flex items:
> 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://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.
#### Workaround
You can avoid this problem by adding a container element to house the element with the intrinsic aspect ratio. Since doing this causes the element with the intrinsic aspect ratio to no longer be a flex item, it will be sized normally.
<!-- To preserve old links -->
<a name="6-the-default-flex-value-has-changed"><a>
### Flexbug #6
_The default `flex` value has changed_
<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/6.1.a-bug.html">6.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/6.1.b-workaround.html">6.1.b</a> – <em>workaround</em><br>
<a href="https://philipwalton.github.io/flexbugs/6.2.a-bug.html">6.2.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/6.2.b-workaround.html">6.2.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10 (fixed in 11)</td>
</tr>
</table>
When IE 10 was being developed, the [March 2012 spec](http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flexibility) said the initial value for the `flex` property was `none`, which translates to `0 0 auto`. The [most recent spec](http://www.w3.org/TR/css3-flexbox/#flex-property) sets the initial `flex` value to the initial values of the individual flexibility properties, which corresponds to `initial` or `0 1 auto`. Notice that this means IE 10 uses a different initial `flex-shrink` value (technically it was called `neg-flex` in the spec at the time) from every other browser. Other browsers (including IE 11) use an initial value of `1` rather than `0`.
This bug can manifest itself in two ways: when not setting any flex values or when using one of the `flex` shorthands. In both cases, flex items in IE 10 will behave differently from all other browsers. The following table illustrates the difference:
<table>
<tr>
<th align="left">Declaration</th>
<th align="left">What it should mean</th>
<th align="left">What it means in IE 10</th>
</tr>
<tr>
<td>(no flex declaration)</td>
<td><code>flex: 0 1 auto</code></td>
<td><code>flex: 0 0 auto</code></td>
</tr>
<tr>
<td><code>flex: 1</code></td>
<td><code>flex: 1 1 0%</code></td>
<td><code>flex: 1 0 0px</code></td>
</tr>
<tr>
<td><code>flex: auto</code></td>
<td><code>flex: 1 1 auto</code></td>
<td><code>flex: 1 0 auto</code></td>
</tr>
<tr>
<td><code>flex: initial</code></td>
<td><code>flex: 0 1 auto</code></td>
<td><code>flex: 0 0 auto</code></td>
</tr>
</table>
#### 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://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.
<!-- To preserve old links -->
<a name="7-flex-basis-doesnt-account-for-box-sizingborder-box"><a>
### Flexbug #7
_`flex-basis` doesn't account for `box-sizing: border-box`_
<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/7.1.a-bug.html">7.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/7.1.b-workaround.html">7.1.b</a> – <em>workaround</em><br>
<a href="https://philipwalton.github.io/flexbugs/7.1.c-workaround.html">7.1.c</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10-11 (fixed in Edge)</td>
</tr>
</table>
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://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://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.
<!-- To preserve old links -->
<a name="8-flex-basis-doesnt-support-calc"><a>
### Flexbug #8
_`flex-basis` doesn't support `calc()`_
<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/8.1.a-bug.html">8.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/8.1.b-workaround.html">8.1.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10-11 (fixed in Edge)</td>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/8.2.a-bug.html">8.2.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/8.2.b-workaround.html">8.2.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10 (fixed in 11)</td>
</tr>
</table>
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://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://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://philipwalton.github.io/flexbugs/8.2.b-workaround.html) offers an example of this.
<!-- To preserve old links -->
<a name="9-some-html-elements-cant-be-flex-containers"><a>
### Flexbug #9
_Some HTML elements can't be flex containers_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/9.1.a-bug.html">9.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/9.1.b-workaround.html">9.1.b</a> – <em>workaround</em><br>
<a href="https://philipwalton.github.io/flexbugs/9.2.a-bug.html">9.2.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/9.2.b-workaround.html">9.2.b</a> – <em>workaround</em><br>
<a href="https://philipwalton.github.io/flexbugs/9.3.a-bug.html">9.3.a</a> – <em>bug</em><br>
</td>
<td>
Chrome<br>
Edge<br>
Firefox (fixed in 63)<br>
Opera<br>
Safari (fixed in 11)
</td>
<td>
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=375693">Chrome #375693 (fixed)</a><br>
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=700029">Chrome #700029 (fixed)</a><br>
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4511145/">Edge #4511145 (obsolete)</a><br>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=984869">Firefox #984869 (fixed)</a><br>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1230207">Firefox #1230207 (fixed)</a><br>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1397768">Firefox #1397768 (fixed)</a><br>
<a href="https://bugs.webkit.org/show_bug.cgi?id=169082">Safari #169082 (fixed)</a><br>
<a href="https://bugs.webkit.org/show_bug.cgi?id=169700">Safari #169700 (fixed)</a><br>
<a href="https://bugs.webkit.org/show_bug.cgi?id=190065">Safari #190065 (fixed)</a>
</td>
</tr>
</table>
Certain HTML elements, like `<summary>`, `<fieldset>` and `<button>`, do not work as flex containers. The browser's default rendering of those element's UI conflicts with the `display: flex` declaration.
Demo [9.1.a](https://philipwalton.github.io/flexbugs/9.1.a-bug.html) shows how `<button>` elements didn't work in Firefox, and demo [9.2.a](https://philipwalton.github.io/flexbugs/9.2.a-bug.html) shows that `<fieldset>` elements don't work in most browsers. Demo [9.3.a](https://philipwalton.github.io/flexbugs/9.3.a-bug.html) shows that `<summary>` elements dont work in Safari.
#### Workaround
The simple solution to this problem is to use a wrapper element that can be a flex container (like a `<div>`) directly inside of the element that can't. Demos [9.1.b](https://philipwalton.github.io/flexbugs/9.1.b-workaround.html) and [9.2.b](https://philipwalton.github.io/flexbugs/9.2.b-workaround.html) show workaround for the `<button>` and `<fieldset>` elements, respectively.
<!-- To preserve old links -->
<a name="10-align-items-baseline-doesnt-work-with-nested-flex-containers"><a>
### Flexbug #10
_`align-items: baseline` doesn't work with nested flex containers_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/10.1.a-bug.html">10.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/10.1.b-workaround.html">10.1.b</a> – <em>workaround</em>
</td>
<td>
Firefox (fixed in 52)
</td>
<td>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146442">Firefox #1146442 (fixed)</a>
</td>
</tr>
</table>
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
This bug only affects nested containers set to `display: flex`. If you set the nested container to `display: inline-flex` it works as expected. Note that when using `inline-flex` you will probably also need to set the width to `100%`.
<!-- To preserve old links -->
<a name="11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items"><a>
### Flexbug #11
_Min and max size declarations are ignored when wrapping flex items_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/11.1.a-bug.html">11.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/11.1.b-workaround.html">11.1.b</a> – <em>workaround</em>
</td>
<td>Safari (fixed in 10.1)</td>
<td>
<a href="https://bugs.webkit.org/show_bug.cgi?id=136041">Safari #136041 (fixed)</a>
</td>
</tr>
</table>
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://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://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.
<!-- To preserve old links -->
<a name="12-inline-elements-are-not-treated-as-flex-items"><a>
### Flexbug #12
_Inline elements are not treated as flex-items_
<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/12.1.a-bug.html">12.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/12.1.b-workaround.html">12.1.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10-11 (fixed in Edge)</td>
</tr>
</table>
Inline elements, including `::before` and `::after` pseudo-elements, are not treated as flex items in IE 10. IE 11 fixed this bug with regular inline element, but it still affects the `::before` and `::after` pseudo-elements.
#### 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://philipwalton.github.io/flexbugs/12.1.b-workaround.html) shows an example of this working in IE 10-11.
<!-- To preserve old links -->
<a name="13-importance-is-ignored-on-flex-basis-when-using-flex-shorthand"><a>
### Flexbug #13
_Importance is ignored on flex-basis when using flex shorthand_
<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/13.1.a-bug.html">13.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/13.1.b-workaround.html">13.1.b</a> – <em>workaround</em>
</td>
<td>Internet Explorer 10 (fixed in 11)</td>
</tr>
</table>
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://philipwalton.github.io/flexbugs/13.1.b-workaround.html) shows an example of this working in IE 10.
<!-- To preserve old links -->
<a name="14-flex-containers-with-wrapping-the-container-is-not-sized-to-contain-its-items"><a>
### Flexbug #14
_Shrink-to-fit containers with `flex-flow: column wrap` do not contain their items_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking Bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/14.1.a-bug.html">14.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/14.1.b-workaround.html">14.1.b</a> – <em>workaround</em><br>
<a href="https://philipwalton.github.io/flexbugs/14.1.c-workaround.html">14.1.c</a> – <em>workaround</em>
</td>
<td>
Chrome (fixed in 118)<br>
Firefox<br>
Safari<br>
Opera<br>
</td>
<td>
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=507397">Chrome #507397 (fixed)</a><br>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=995020">Firefox #995020</a><br>
<a href="https://bugs.webkit.org/show_bug.cgi?id=157648">Safari #157648</a>
</td>
</tr>
</table>
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://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://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://philipwalton.github.io/flexbugs/14.1.c-workaround.html) shows an example of how this can be needed in Safari 10.
### Flexbug #15
_Column flex items ignore `margin: auto` on the cross axis_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking Bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/15.1.a-bug.html">15.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/15.1.b-workaround.html">15.1.b</a> – <em>workaround</em>
</td>
<td>
Internet Explorer 10-11 (fixed in Edge)
</td>
<td>
<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14593426/">IE #14593426</a>
</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.
#### 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://philipwalton.github.io/flexbugs/15.1.b-workaround.html) shows this working in IE 10-11.
### Flexbug #16
_`flex-basis` cannot be animated_
<table>
<tr>
<th align="left">Demos</th>
<th align="left">Browsers affected</th>
<th align="left">Tracking Bugs</th>
</tr>
<tr valign="top">
<td>
<a href="https://philipwalton.github.io/flexbugs/16.1.a-bug.html">16.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/16.1.b-workaround.html">16.1.b</a> – <em>workaround</em>
</td>
<td>
Internet Explorer 10-11<br>
Safari
</td>
<td>
<a href="https://bugs.webkit.org/show_bug.cgi?id=180435">Safari #180435 (fixed)</a>
</td>
</tr>
</table>
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://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
_Flex items are not correctly justified when `max-width` is used_
<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/17.1.a-bug.html">17.1.a</a> – <em>bug</em><br>
<a href="https://philipwalton.github.io/flexbugs/17.1.b-workaround.html">17.1.b</a> – <em>workaround</em>
</td>
<td>
Internet Explorer 11
</td>
</tr>
</table>
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
In most cases where a max-size property is used on a flex item, the desired result is to have that item's initial size start at the value of the `flex-basis` property and grow to no larger than its max-size value.
In such cases, the same effect can be achieved by initially specifying the desired max-size as the item's `flex-basis` and then letting it shrink by setting the min-size property (`min-width` in the row direction, `min-height` in the column direction) to whatever `flex-basis` was previously set to.
In other words, the following two declarations will both render an item with a final size between `0%` and `25%` depending on the available free space:
```css
.using-a-grow-strategy {
flex: 1 0 0%;
max-width: 25%;
}
.using-a-shrink-strategy {
flex: 0 1 25%;
min-width: 0%;
}
```
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 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
If you've discovered a flexbox bug and would like to submit a workaround for it, please open an issue or submit a pull request. Make sure to submit relevant test cases or screenshots and indicate which browsers are affected.
Please only submit bugs if they have a viable workaround and the workaround applies to most use cases. If you do not know of a workaround, but you're reasonably confident one exists, please indicate that in the issue and the community can help investigate.
**Note: Do not submit bugs here in lieu of reporting them to browser vendors. [Reporting bugs to browser vendors](https://www.smashingmagazine.com/2011/09/help-the-community-report-browser-bugs/) is the best and fastest way to get bugs fixed.**
================================================
FILE: docs/1.1.a-bug.html
================================================
<!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>
================================================
FILE: docs/1.1.b-workaround.html
================================================
<!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>
================================================
FILE: docs/1.2.a-bug.html
================================================
<!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>
================================================
FILE: docs/1.2.b-workaround.html
================================================
<!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>
================================================
FILE: docs/10.1.a-bug.html
================================================
<!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>
================================================
FILE: docs/10.1.b-workaround.html
================================================
<!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>
================================================
FILE: docs/11.1.a-bug.html
================================================
<!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>
================================================
FILE: docs/11.1.b-workaround.html
================================================
<!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.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 11.1.b (workaround)
*/
.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 0 200px;
flex: 1 0 200px;
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>
================================================
FILE: docs/12.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 12.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 12.1.a (bug)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexContainer::before {
content: '::before item';
}
.FlexContainer::before,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<span class="FlexItem">Span item</span>
<div class="FlexItem">Div item</div>
</div>
</body>
</html>
================================================
FILE: docs/12.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 12.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 12.1.b (workaround)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexContainer::before {
content: '::before item';
}
.FlexContainer::before,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
display: block;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<span class="FlexItem">Span item</span>
<div class="FlexItem">Div item</div>
</div>
</body>
</html>
================================================
FILE: docs/13.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 13.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 13.1.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
}
.FlexItemImportantOverride {
-webkit-box-flex: 0 !important;
-ms-flex: 0 0 100% !important;
flex: 0 0 100% !important;
}
.FlexItem {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.FlexItem p {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem FlexItemImportantOverride">
<p>I should be full width</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/13.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 13.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 13.1.b (workaround)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
}
.FlexItemImportantOverride {
-webkit-box-flex: 0 !important;
-ms-flex: 0 0 100% !important;
flex: 0 0 100% !important;
-ms-flex-preferred-size: 100% !important;
flex-basis: 100% !important;
}
.FlexItem {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.FlexItem p {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem FlexItemImportantOverride">
<p>I should be full width</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/14.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 14.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 14.1.a (bug)
*/
.FlexContainer {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
height: 13em;
}
/* Presentational styles */
/* not demo related */
.FlexContainer {
outline: 1px solid red;
list-style: none;
margin: 1em;
padding: 0.5em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
margin: 0.5em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<ul class="FlexContainer">
<li class="FlexItem">One</li>
<li class="FlexItem">Two</li>
<li class="FlexItem">Three</li>
<li class="FlexItem">Four</li>
<li class="FlexItem">Five</li>
<li class="FlexItem">Six</li>
<li class="FlexItem">Seven</li>
<li class="FlexItem">Eight</li>
<li class="FlexItem">Nine</li>
<li class="FlexItem">Ten</li>
</ul>
</body>
</html>
================================================
FILE: docs/14.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 14.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 14.1.b (workaround)
*/
.FlexContainer {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: wrap;
flex-flow: wrap;
height: 13em;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
.FlexItem {
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
/* Presentational styles */
/* not demo related */
.FlexContainer {
outline: 1px solid red;
list-style: none;
margin: 1em;
padding: 0.5em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
margin: 0.5em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<ul class="FlexContainer">
<li class="FlexItem">One</li>
<li class="FlexItem">Two</li>
<li class="FlexItem">Three</li>
<li class="FlexItem">Four</li>
<li class="FlexItem">Five</li>
<li class="FlexItem">Six</li>
<li class="FlexItem">Seven</li>
<li class="FlexItem">Eight</li>
<li class="FlexItem">Nine</li>
<li class="FlexItem">Ten</li>
</ul>
</body>
</html>
================================================
FILE: docs/14.1.c-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 14.1.c (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 14.1.c (workaround)
*/
.FlexContainer {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-flow: wrap;
flex-flow: wrap;
height: 13em;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
}
.FlexItem {
height: 1em;
width: 3em;
-webkit-writing-mode: horizontal-tb;
-ms-writing-mode: lr-tb;
writing-mode: horizontal-tb;
}
/* Presentational styles */
/* not demo related */
.FlexContainer {
outline: 1px solid red;
list-style: none;
margin: 1em;
padding: 0.5em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
margin: 0.5em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<ul class="FlexContainer">
<li class="FlexItem">One</li>
<li class="FlexItem">Two</li>
<li class="FlexItem">Three</li>
<li class="FlexItem">Four</li>
<li class="FlexItem">Five</li>
<li class="FlexItem">Six</li>
<li class="FlexItem">Seven</li>
<li class="FlexItem">Eight</li>
<li class="FlexItem">Nine</li>
<li class="FlexItem">Ten</li>
</ul>
</body>
</html>
================================================
FILE: docs/15.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 15.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 15.1.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;
height: 10em;
}
.FlexItem {
margin: auto;
}
/* Presentational styles */
/* not demo related */
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
}
.FlexContainer {
margin: 1em;
padding: 1em;
}
.FlexItem {
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
Item
</div>
</div>
</body>
</html>
================================================
FILE: docs/15.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 15.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 15.1.b (workaround)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 10em;
}
.FlexItem {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin: auto;
}
/* Presentational styles */
/* not demo related */
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
}
.FlexContainer {
margin: 1em;
padding: 1em;
}
.FlexItem {
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
Item
</div>
</div>
</body>
</html>
================================================
FILE: docs/16.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 16.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 16.1.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.FlexItem {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes swing {
0% {
flex-basis: 20%;
}
100% {
flex-basis: 80%;
}
}
@keyframes swing {
0% {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
100% {
-ms-flex-preferred-size: 80%;
flex-basis: 80%;
}
}
/* 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">
Weeeeee!
</div>
</div>
</body>
</html>
================================================
FILE: docs/16.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 16.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 16.1.b (workaround)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.FlexItem {
width: 20%;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes swing {
0% {
width: 20%;
}
100% {
width: 80%;
}
}
@keyframes swing {
0% {
width: 20%;
}
100% {
width: 80%;
}
}
/* 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">
Weeeeee!
</div>
</div>
</body>
</html>
================================================
FILE: docs/17.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 17.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 17.1.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.FlexContainer--itemsCentered {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.FlexContainer--itemsSpaced {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.FlexItem {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%;
max-width: 25%;
}
/* 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;
}
.FlexItem:last-child {
text-align: right;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer FlexContainer--itemsCentered">
<div class="FlexItem">
We should be…
</div>
<div class="FlexItem">
…centered
</div>
</div>
<div class="FlexContainer FlexContainer--itemsSpaced">
<div class="FlexItem">
We should have…
</div>
<div class="FlexItem">
…space bewteen us
</div>
</div>
</body>
</html>
================================================
FILE: docs/17.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 17.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 17.1.b (workaround)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.FlexContainer--itemsCentered {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.FlexContainer--itemsSpaced {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.FlexItem {
-webkit-box-flex: 0;
-ms-flex: 0 1 25%;
flex: 0 1 25%;
min-width: 0;
}
/* 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;
}
.FlexItem:last-child {
text-align: right;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer FlexContainer--itemsCentered">
<div class="FlexItem">
We should be…
</div>
<div class="FlexItem">
…centered
</div>
</div>
<div class="FlexContainer FlexContainer--itemsSpaced">
<div class="FlexItem">
We should have…
</div>
<div class="FlexItem">
…space bewteen us
</div>
</div>
</body>
</html>
================================================
FILE: docs/2.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 2.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 2.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: column;
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">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
</div>
</div>
</body>
</html>
================================================
FILE: docs/2.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 2.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 2.1.b (workaround)
*
* 1. Set `max-width:100%` to prevent
* overflow.
* 2. Set `box-sizing:border-box` if
* needed to account for padding
* and border 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: column;
height: 200px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 1em;
padding: 2em;
width: 300px;
}
.FlexItem {
-webkit-box-sizing: border-box;
box-sizing: border-box; /* 2 */
max-width: 100%; /* 1 */
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
</div>
</div>
</body>
</html>
================================================
FILE: docs/3.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 3.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 3.1.a (bug)
*/
.Site {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.Site-footer,
.Site-header {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
}
.Site-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 1em;
}
</style>
</head>
<body translate="no">
<div class="Site">
<header class="Site-header">Header</header>
<main class="Site-content">
<p><strong>Change the size of the window to see the sticky footer in action.</strong></p>
<p>
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.
</p>
<p>
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.
</p>
</main>
<footer class="Site-footer">Footer</footer>
</div>
</body>
</html>
================================================
FILE: docs/3.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 3.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 3.1.b (workaround)
*
* 1. Use `height` instead of `min-height`.
* 2. Flexbug #1 workaround.
*/
.Site {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh; /* 1 */
}
.Site-footer,
.Site-header {
background: hsla(0, 0%, 0%, 0.1);
-ms-flex-negative: 0;
flex-shrink: 0; /* 2 */
padding: 1em;
}
.Site-content {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto; /* 2 */
padding: 0 1em;
}
</style>
</head>
<body translate="no">
<div class="Site">
<header class="Site-header">Header</header>
<main class="Site-content">
<p><strong>Change the size of the window to see the sticky footer in action.</strong></p>
<p>
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.
</p>
<p>
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.
</p>
</main>
<footer class="Site-footer">Footer</footer>
</div>
</body>
</html>
================================================
FILE: docs/3.2.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 3.2.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 3.2.a (bug)
*
* 1. Flexbug #2 workaround.
*/
.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: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 1em;
padding: 2em;
min-height: 250px;
width: 400px;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
-webkit-box-sizing: border-box;
box-sizing: border-box; /* 1 */
max-width: 100%; /* 1 */
padding: 0 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
<p>
When content is sparse,<br />
I should be centered.
</p>
</div>
</div>
<div class="FlexContainer">
<div class="FlexItem">
<p>
When there's lots of content—more content than can fit inside the flex container—the container should expand vertically to accomodate.
</p>
<p>
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.
</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/3.2.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 3.2.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 3.2.b (workaround)
*
* 1. Flexbug #2 workaround.
*/
.FlexContainerWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.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: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 1em;
padding: 2em;
min-height: 250px;
width: 400px;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
-webkit-box-sizing: border-box;
box-sizing: border-box; /* 1 */
max-width: 100%; /* 1 */
padding: 0 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainerWrapper">
<div class="FlexContainer">
<div class="FlexItem">
<p>
When content is sparse,<br />
I should be centered.
</p>
</div>
</div>
</div>
<div class="FlexContainerWrapper">
<div class="FlexContainer">
<div class="FlexItem">
<p>
When there's lots of content—more content than can fit inside the flex container—the container should expand vertically to accomodate.
</p>
<p>
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.
</p>
</div>
</div>
</div>
</body>
</html>
================================================
FILE: docs/4.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 4.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 4.1.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.FlexItem {
-webkit-box-flex: 1;
-ms-flex: 1 0 0px;
flex: 1 0 0;
}
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
Flexed content
</div>
<div class="FlexItem">
Flexed content
</div>
</div>
</body>
</html>
================================================
FILE: docs/4.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 4.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 4.1.b (workaround)
*
* 1. Always add a unit to `flex-basis`
* values. Note, prefer `0%` to `0px`
* since some minifiers will convert
* `0px` to just `0`.
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.FlexItem {
-webkit-box-flex: 1;
-ms-flex: 1 0 0%;
flex: 1 0 0%; /* 1 */
}
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
Flexed content
</div>
<div class="FlexItem">
Flexed content
</div>
</div>
</body>
</html>
================================================
FILE: docs/5.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 5.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 5.1.a (bug)
*/
.FlexContainer {
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: column;
height: 300px;
margin: 1em;
width: 300px;
}
.FlexItem {
height: auto;
width: 100%;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<img class="FlexItem" src="http://placehold.it/800x200/333" />
</div>
</body>
</html>
================================================
FILE: docs/5.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 5.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 5.1.b (workaround)
*
* 1. Add a wrapper element to house
* the element with an intrinsic
* aspect ratio.
* 2. Flexbug #2 workaround.
*/
.FlexContainer {
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: column;
height: 300px;
margin: 1em;
width: 300px;
}
.FlexItem {
/* 1 */
-ms-flex-negative: 0;
flex-shrink: 0; /* 2 */
}
.FlexItem img {
height: auto;
width: 100%;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
<img src="http://placehold.it/800x200/333" />
</div>
</div>
</body>
</html>
================================================
FILE: docs/6.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 6.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 6.1.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100px;
width: 500px;
}
.FlexItem {
width: 300px;
}
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem"></div>
<div class="FlexItem"></div>
</div>
</body>
</html>
================================================
FILE: docs/6.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 6.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 6.1.b (workaround)
*
* 1. Always set an explicit `flex-shrink`
* value to whatever you need it to be in
* all browsers.
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100px;
width: 500px;
}
.FlexItem {
-ms-flex-negative: 1;
flex-shrink: 1; /* 1 */
width: 300px;
}
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem"></div>
<div class="FlexItem"></div>
</div>
</body>
</html>
================================================
FILE: docs/6.2.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 6.2.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 6.2.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100px;
width: 500px;
}
.FlexItem {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem"></div>
<div class="FlexItem"></div>
</div>
</body>
</html>
================================================
FILE: docs/6.2.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 6.2.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 6.2.b (workaround)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100px;
width: 500px;
}
.FlexItem {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.FlexContainer,
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem"></div>
<div class="FlexItem"></div>
</div>
</body>
</html>
================================================
FILE: docs/7.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 7.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 7.1.a (bug)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
background-clip: padding-box;
border: 1em solid transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
padding: 1em;
text-align: center;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
Item with padding and border
</div>
</div>
</body>
</html>
================================================
FILE: docs/7.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 7.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 7.1.b (workaround)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
background-clip: padding-box;
border: 1em solid transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding: 1em;
text-align: center;
width: 100%;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
Item with padding and border
</div>
</div>
</body>
</html>
================================================
FILE: docs/7.1.c-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 7.1.c (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 7.1.c (workaround)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.FlexItem p {
background: hsla(0, 0%, 0%, 0.1);
background-clip: padding-box;
border: 1em solid transparent;
margin: 0;
padding: 1em;
text-align: center;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
<p>Item with padding and border</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/8.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 8.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 8.1.a (bug)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(100% / 3);
flex: 0 0 calc(100% / 3);
}
.FlexItem p {
background: hsla(0, 0%, 0%, 0.1);
text-align: center;
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/8.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 8.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 8.1.b (workaround)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
}
.FlexItem p {
background: hsla(0, 0%, 0%, 0.1);
text-align: center;
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/8.2.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 8.2.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 8.2.a (bug)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: calc(100% / 3);
flex-basis: calc(100% / 3);
}
.FlexItem p {
background: hsla(0, 0%, 0%, 0.1);
text-align: center;
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/8.2.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 8.2.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 8.2.b (workaround)
*/
.FlexContainer {
background: hsla(0, 0%, 0%, 0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
padding: 1em;
}
.FlexItem {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: calc(100% / 3);
}
.FlexItem p {
background: hsla(0, 0%, 0%, 0.1);
text-align: center;
margin: 1em;
padding: 1em;
}
</style>
</head>
<body translate="no">
<div class="FlexContainer">
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
<div class="FlexItem">
<p>1/3</p>
</div>
</div>
</body>
</html>
================================================
FILE: docs/9.1.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 9.1.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 9.1.a (bug)
*/
.Button {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid;
background: #eee;
border-radius: 0.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: Helvetica Neue, Lucida Grande, serif;
margin: 2em;
padding: 1em 2em;
}
.Button-icon {
height: 2em;
width: 2em;
}
.Button-text {
margin-left: 0.75em;
font-size: 1.5em;
}
</style>
</head>
<body translate="no">
<button class="Button">
<svg class="Button-icon" viewBox="0 0 512 512">
<path d="M512 295.222l-256-198.713-256 198.714v-81.019l256-198.713 256 198.714zM448 288v192h-128v-128h-128v128h-128v-192l192-144z"></path>
</svg>
<span class="Button-text">Home </span>
</button>
</body>
</html>
================================================
FILE: docs/9.1.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 9.1.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 9.1.b (workaround)
*/
.Button {
border: 1px solid;
background: #eee;
border-radius: 0.5em;
font-family: Helvetica Neue, Lucida Grande, serif;
margin: 2em;
padding: 0;
}
.Button-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1em 2em;
}
.Button-icon {
height: 2em;
width: 2em;
}
.Button-text {
margin-left: 0.75em;
font-size: 1.5em;
}
</style>
</head>
<body translate="no">
<button class="Button">
<span class="Button-wrapper">
<svg class="Button-icon" viewBox="0 0 512 512">
<path d="M512 295.222l-256-198.713-256 198.714v-81.019l256-198.713 256 198.714zM448 288v192h-128v-128h-128v128h-128v-192l192-144z"></path>
</svg>
<span class="Button-text">Home </span>
</span>
</button>
</body>
</html>
================================================
FILE: docs/9.2.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 9.2.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 9.2.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
background: #fff;
border: 1px solid #aaa;
margin: 1em;
padding: 1em;
width: 8em;
}
</style>
</head>
<body translate="no">
<fieldset class="FlexContainer">
<div class="FlexItem">
<input placeholder="these fields" />
</div>
<div class="FlexItem">
<input placeholder="shouldn't be" />
</div>
<div class="FlexItem">
<input placeholder="stack vertically" />
</div>
</fieldset>
</body>
</html>
================================================
FILE: docs/9.2.b-workaround.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 9.2.b (workaround)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 9.2.b (workaround)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
background: #fff;
border: 1px solid #aaa;
margin: 1em;
padding: 1em;
width: 8em;
}
</style>
</head>
<body translate="no">
<fieldset>
<div class="FlexContainer">
<div class="FlexItem">
<input placeholder="these fields" />
</div>
<div class="FlexItem">
<input placeholder="shouldn't be" />
</div>
<div class="FlexItem">
<input placeholder="stack vertically" />
</div>
</div>
</fieldset>
</body>
</html>
================================================
FILE: docs/9.3.a-bug.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbug 9.3.a (bug)</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
/**
* Flexbug demo 9.3.a (bug)
*/
.FlexContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 1em;
}
.FlexItem {
background: hsla(0, 0%, 0%, 0.1);
padding: 1em;
margin: 1em;
}
summary {
border: 0;
margin: 0;
padding: 0;
}
span {
background: #fff;
border: 1px solid #aaa;
margin: 1em;
padding: 1em;
width: 8em;
}
</style>
</head>
<body translate="no">
<summary class="FlexContainer">
<div class="FlexItem">
<span>these elements</span>
</div>
<div class="FlexItem">
<span>shouldn't be</span>
</div>
<div class="FlexItem">
<span>stacked vertically</span>
</div>
</summary>
</body>
</html>
================================================
FILE: docs/README.md
================================================
## 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.
================================================
FILE: docs/_config.yml
================================================
theme: jekyll-theme-slate
gitextract_qro50g1q/
├── .github/
│ └── ISSUE_TEMPLATE.md
├── LICENSE
├── README.md
└── docs/
├── 1.1.a-bug.html
├── 1.1.b-workaround.html
├── 1.2.a-bug.html
├── 1.2.b-workaround.html
├── 10.1.a-bug.html
├── 10.1.b-workaround.html
├── 11.1.a-bug.html
├── 11.1.b-workaround.html
├── 12.1.a-bug.html
├── 12.1.b-workaround.html
├── 13.1.a-bug.html
├── 13.1.b-workaround.html
├── 14.1.a-bug.html
├── 14.1.b-workaround.html
├── 14.1.c-workaround.html
├── 15.1.a-bug.html
├── 15.1.b-workaround.html
├── 16.1.a-bug.html
├── 16.1.b-workaround.html
├── 17.1.a-bug.html
├── 17.1.b-workaround.html
├── 2.1.a-bug.html
├── 2.1.b-workaround.html
├── 3.1.a-bug.html
├── 3.1.b-workaround.html
├── 3.2.a-bug.html
├── 3.2.b-workaround.html
├── 4.1.a-bug.html
├── 4.1.b-workaround.html
├── 5.1.a-bug.html
├── 5.1.b-workaround.html
├── 6.1.a-bug.html
├── 6.1.b-workaround.html
├── 6.2.a-bug.html
├── 6.2.b-workaround.html
├── 7.1.a-bug.html
├── 7.1.b-workaround.html
├── 7.1.c-workaround.html
├── 8.1.a-bug.html
├── 8.1.b-workaround.html
├── 8.2.a-bug.html
├── 8.2.b-workaround.html
├── 9.1.a-bug.html
├── 9.1.b-workaround.html
├── 9.2.a-bug.html
├── 9.2.b-workaround.html
├── 9.3.a-bug.html
├── README.md
└── _config.yml
Condensed preview — 52 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (112K chars).
[
{
"path": ".github/ISSUE_TEMPLATE.md",
"chars": 1044,
"preview": "### Important! Please read before opening an issue:\n\n- This repo **is not** for reporting Flexbox bugs in browsers. Plea"
},
{
"path": "LICENSE",
"chars": 1081,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2015 Philip Walton\n\nPermission is hereby granted, free of charge, to any person obt"
},
{
"path": "README.md",
"chars": 35967,
"preview": ":warning: _**UPDATE:** this repo is no longer maintained, as most of the bugs listed here are fixed in modern browsers._"
},
{
"path": "docs/1.1.a-bug.html",
"chars": 1022,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/1.1.b-workaround.html",
"chars": 1329,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/1.2.a-bug.html",
"chars": 1274,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/1.2.b-workaround.html",
"chars": 1581,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/10.1.a-bug.html",
"chars": 1294,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/10.1.b-workaround.html",
"chars": 1350,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/11.1.a-bug.html",
"chars": 1200,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/11.1.b-workaround.html",
"chars": 1230,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/12.1.a-bug.html",
"chars": 1059,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/12.1.b-workaround.html",
"chars": 1097,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/13.1.a-bug.html",
"chars": 1095,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/13.1.b-workaround.html",
"chars": 1196,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/14.1.a-bug.html",
"chars": 1460,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/14.1.b-workaround.html",
"chars": 1636,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/14.1.c-workaround.html",
"chars": 1677,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/15.1.a-bug.html",
"chars": 1141,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/15.1.b-workaround.html",
"chars": 1256,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/16.1.a-bug.html",
"chars": 1842,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/16.1.b-workaround.html",
"chars": 1778,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/17.1.a-bug.html",
"chars": 1770,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/17.1.b-workaround.html",
"chars": 1784,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/2.1.a-bug.html",
"chars": 1261,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/2.1.b-workaround.html",
"chars": 1578,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/3.1.a-bug.html",
"chars": 2721,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/3.1.b-workaround.html",
"chars": 2917,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/3.2.a-bug.html",
"chars": 2691,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/3.2.b-workaround.html",
"chars": 3118,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/4.1.a-bug.html",
"chars": 954,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/4.1.b-workaround.html",
"chars": 1154,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/5.1.a-bug.html",
"chars": 978,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/5.1.b-workaround.html",
"chars": 1283,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/6.1.a-bug.html",
"chars": 883,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/6.1.b-workaround.html",
"chars": 1088,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/6.2.a-bug.html",
"chars": 991,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/6.2.b-workaround.html",
"chars": 954,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/7.1.a-bug.html",
"chars": 1099,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/7.1.b-workaround.html",
"chars": 1134,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/7.1.c-workaround.html",
"chars": 1168,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/8.1.a-bug.html",
"chars": 1124,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/8.1.b-workaround.html",
"chars": 1257,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/8.2.a-bug.html",
"chars": 1243,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/8.2.b-workaround.html",
"chars": 1149,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/9.1.a-bug.html",
"chars": 1278,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/9.1.b-workaround.html",
"chars": 1403,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/9.2.a-bug.html",
"chars": 1222,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/9.2.b-workaround.html",
"chars": 1279,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/9.3.a-bug.html",
"chars": 1189,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-w"
},
{
"path": "docs/README.md",
"chars": 562,
"preview": "## Flexbugs Static Files\n\nThis folder primarily houses static html files containing [bugs and their workarounds](https:/"
},
{
"path": "docs/_config.yml",
"chars": 25,
"preview": "theme: jekyll-theme-slate"
}
]
About this extraction
This page contains the full source code of the philipwalton/flexbugs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 52 files (102.4 KB), approximately 31.3k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.