So sánh flex-basis và width
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 so everyone else can benefit. The bugs and their workaroundsFlexbug1Minimum content sizing of flex items not honored Demos Browsers affected Tracking bugs 1.1.a – bug 1.1.b – workaround 1.2.a – bug 1.2.b – workaround Chrome (fixed in 72) Opera (fixed in 60) Safari (fixed in 10) Chrome 426898 (fixed)Chrome 596743 (fixed)Safari 146020 (fixed)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 `align-items: center`5 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 : 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. WorkaroundThe flexbox spec defines an initial Flexbug2Column flex items set to Demos Browsers affected 2.1.a – bug 2.1.b – workaround Internet Explorer 10-11 (fixed in Edge) When using WorkaroundMost of the time, this can be fixed by simply setting Flexbug3
Demos Browsers affected Tracking bugs 3.1.a – bug 3.1.b – workaround 3.2.a – bug 3.2.b – workaround Internet Explorer 10-11 (fixed in Edge) IE 802625 (archived)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, WorkaroundBy far the most common element to apply For cases where Flexbug4
Demos Browsers affected 4.1.a – bug 4.1.b – workaround Internet Explorer 10-11 (fixed in Edge) Prior to the release of IE 10, the stated that a flexbox item's preferred size required a unit when using the If the This is no longer true in the spec, but IE 10-11 still treat it as true. If you use the declaration `flex-basis`0 in one of these browsers, it will be an error and the entire rule (including all the flexibility properties) will be ignored. WorkaroundWhen using the Important: using a Flexbug5Column flex items don't always preserve intrinsic aspect ratios Demos Browsers affected 5.1.a – bug 5.1.b – workaround Internet Explorer 10-11 (fixed in Edge) The 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 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 has resolved this ambiguity in favor of using sizes that will preserve an element's intrinsic aspect ratio. WorkaroundYou 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. Flexbug6The default Demos Browsers affected 6.1.a – bug 6.1.b – workaround 6.2.a – bug 6.2.b – workaround Internet Explorer 10 (fixed in 11) When IE 10 was being developed, the said the initial value for the This bug can manifest itself in two ways: when not setting any flex values or when using one of the Declaration What it should mean What it means in IE 10 (no flex declaration)`flex-basis`2`flex-basis`3`flex-basis`4`flex-basis`5`flex-basis`6`flex-basis`7`flex-basis`8`flex-basis`9`box-sizing: border-box`0`flex-basis`2`flex-basis`3 WorkaroundIf you have to support IE 10, the best solution is to always set an explicit Flexbug7
Demos Browsers affected 7.1.a – bug 7.1.b – workaround 7.1.c – workaround Internet Explorer 10-11 (fixed in Edge) An explicit IE 10-11 always assume a content box model when using WorkaroundThere are two ways to work around this bug. The first requires no additional markup, but the second is slightly more flexible:
Flexbug8
Demos Browsers affected 8.1.a – bug 8.1.b – workaround Internet Explorer 10-11 (fixed in Edge) 8.2.a – bug 8.2.b – workaround Internet Explorer 10 (fixed in 11) IE 10-11 ignore In IE 10, WorkaroundSince this bug only affects the If you need to support IE 10 as well, then you'll need to fall back to setting Flexbug9Some HTML elements can't be flex containers Demos Browsers affected Tracking bugs 9.1.a – bug 9.1.b – workaround 9.2.a – bug 9.2.b – workaround 9.3.a – bug Chrome Edge Firefox (fixed in 63) Opera Safari (fixed in 11) Chrome 375693Chrome 700029Edge 4511145Firefox 984869 (fixed)Firefox 1230207 (fixed)Firefox 1397768 (fixed)Safari 169082 (fixed)Safari 169700 (fixed)Safari 190065Certain HTML elements, like `align-items: center`04, `align-items: center`05 and `align-items: center`06, do not work as flex containers. The browser's default rendering of those element's UI conflicts with the `align-items: center`07 declaration. Demo 9.1.a shows how `align-items: center`06 elements didn't work in Firefox, and demo 9.2.a shows that `align-items: center`05 elements don't work in most browsers. Demo 9.3.a shows that `align-items: center`04 elements dont work in Safari. WorkaroundThe simple solution to this problem is to use a wrapper element that can be a flex container (like a `align-items: center`11) directly inside of the element that can't. Demos 9.1.b and 9.2.b show workaround for the `align-items: center`06 and `align-items: center`05 elements, respectively. Flexbug10`align-items: center`0 doesn't work with nested flex containers Demos Browsers affected Tracking bugs 10.1.a – bug 10.1.b – workaround Firefox (fixed in 52) Firefox 1146442 (fixed)In Firefox, nested flex containers don't contribute to the baseline that other flex items should align themselves to. Demo 10.1.a 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. WorkaroundThis bug only affects nested containers set to `align-items: center`07. If you set the nested container to `align-items: center`16 it works as expected. Note that when using `align-items: center`17 you will probably also need to set the width to `flex`1. Flexbug11Min and max size declarations are ignored when wrapping flex items Demos Browsers affected Tracking bugs 11.1.a – bug 11.1.b – workaround Safari (fixed in 10.1) Safari 136041Safari 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 This is problematic when using the `flex-basis`4 shorthand because that sets the flex basis to `flex-basis`8, 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 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. WorkaroundThe 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 shows an example of setting the flex basis to the same value as the min width to workaround this bug in Safari. Flexbug12Inline elements are not treated as flex-items Demos Browsers affected 12.1.a – bug 12.1.b – workaround Internet Explorer 10-11 (fixed in Edge) Inline elements, including `align-items: center`23 and `align-items: center`24 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 `align-items: center`23 and `align-items: center`24 pseudo-elements. WorkaroundThis issue can be avoided by adding a non-inline display value to the items, e.g. Flexbug13Importance is ignored on flex-basis when using flex shorthand Demos Browsers affected 13.1.a – bug 13.1.b – workaround Internet Explorer 10 (fixed in 11) When applying WorkaroundIf you need the Flexbug14Shrink-to-fit containers with `align-items: center`1 do not contain their items Demos Browsers affected Tracking Bugs 14.1.a – bug 14.1.b – workaround 14.1.c – workaround Chrome Firefox Safari Opera Chrome 507397Firefox 995020Safari 157648If you float a flex container, use `align-items: center`17, or absolutely position it, the size of the container becomes determined by its content (a.k.a shrink-to-fit). When using `align-items: center`1, some browsers do not properly size the container based on its content, and there is unwanted overflow. Demo 14.1.a shows an example of this. WorkaroundIf your container has a fixed height (usually the case when you enable wrapping), you avoid this bug by using `align-items: center`44 (note `align-items: center`45 instead of `align-items: center`46) and fake the column behavior by updating the container's writing mode (and reseting it on the items). Demo 14.1.b 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 shows an example of how this can be needed in Safari 10. Flexbug15Column flex items ignore `align-items: center`2 on the cross axis Demos Browsers affected Tracking Bugs 15.1.a – bug 15.1.b – workaround Internet Explorer 10-11 (fixed in Edge) IE 14593426`align-items: center`2 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-items: center`49 property, which defaults to `align-items: center`50. Demo 15.1.a shows an example of this. WorkaroundIf you're using Flexbug16
Demos Browsers affected Tracking Bugs 16.1.a – bug 16.1.b – workaround Internet Explorer 10-11 Safari Safari 180435In some browsers, CSS animations involving the WorkaroundSince the Flexbug17Flex items are not correctly justified when `align-items: center`4 is used Demos Browsers affected 17.1.a – bug 17.1.b – workaround Internet Explorer 11 In IE 11 the free space between or around flex items (as per their container's `align-items: center`68 property) is not correctly calculated if a max-size property is used (`align-items: center`4 in the row direction, `align-items: center`70 in the column direction). Demo 17.1.a shows an example of this. WorkaroundIn 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 In such cases, the same effect can be achieved by initially specifying the desired max-size as the item's In other words, the following two declarations will both render an item with a final size between `flex-basis`8 and `align-items: center`77 depending on the available free space: .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 shows this working in IE 11. AcknowledgmentsFlexbugs was created as a follow-up to the article Normalizing Cross-Browser Flexbox Bugs. It is maintained by @philwalton, @gregwhitworth and @akaustav. If you have any questions or would like to get involved, please feel free to reach out to one of us on Twitter. ContributingIf 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 is the best and fastest way to get bugs fixed. |