CSS maintenance: flex-basis property

files/en-us/web/css/flex-basis/index.md

@@ -7,19 +7,18 @@ browser-compat: css.properties.flex-basis
 
 {{CSSRef}}
 
-The **`flex-basis`** [CSS](/en-US/docs/Web/CSS) property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with {{Cssxref("box-sizing")}}.
+The **`flex-basis`** [CSS](/en-US/docs/Web/CSS) property sets the initial main size of a {{glossary("flex item")}}. It sets the size of the content box unless otherwise set with {{Cssxref("box-sizing")}}.
+
+> [!NOTE]
+> It is recommended to use the {{cssxref("flex")}} shorthand instead of separate `flex-grow`, `flex-shrink`, and `flex-basis` declarations. We have separated them here as this document is about one of the shorthand components: the `flex-basis` property.
 
 {{EmbedInteractiveExample("pages/css/flex-basis.html")}}
 
 In this example, the {{cssxref("flex-grow")}} and {{cssxref("flex-shrink")}} properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`.
 
-The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at 200px but then shrink to fit the space available with the other items being at least `min-content` sized.
-
-The image below shows how the Firefox [Flexbox Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) helps you understand the size items become:
+The demo changes the `flex-basis` value set on the first flex item, causing it to grow or shrink to fill the available space. The other flex items will also change size; they will be at least `min-content`-sized. For example, when the `flex-basis` of the first item is set to `200px`, it will start at `200px` but then shrink to fit the space available.
 
-![The Firefox flexbox inspector showing the size of the item once it has shrunk.](firefox-flex-basis.png)
-
-> **Note:** In case both `flex-basis` (other than `auto`) and `width` (or `height` in case of `flex-direction: column`) are set for an element, `flex-basis` has priority.
+If `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence.
 
 ## Syntax
 
@@ -53,23 +52,17 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w
 - `<'width'>`
 
   - : Any of the following units:
-    - {{cssxref("&lt;length&gt;")}} sets an absolute value
-    - {{cssxref("&lt;percentage&gt;")}} sets a percentage of the width or height of a containing block's content area
-    - `auto` uses the value of the [width](https://drafts.csswg.org/css2/#the-width-property) in horizontal writing mode, and the value of the [height](https://drafts.csswg.org/css2/#the-height-property) in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead
-    - `max-content` sets the intrinsic preferred width
-    - `min-content` sets the intrinsic minimum width
-    - `fit-content` sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element
+    - {{cssxref("&lt;length&gt;")}} sets an absolute value.
+    - {{cssxref("&lt;percentage&gt;")}} sets a percentage of the width or height of the containing block's content area.
+    - `auto` uses the value of the {{cssxref("width")}} in horizontal writing mode, and the value of the {{cssxref("height")}} in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead.
+    - {{cssxref("max-content")}} sets the intrinsic preferred width.
+    - {{cssxref("min-content")}} sets the intrinsic minimum width.
+    - {{cssxref("fit-content")}} sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element.
 
 - `content`
 
   - : Indicates automatic sizing, based on the flex item's content.
 
-    > **Note:** This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using `auto` together with a main size ([width](https://drafts.csswg.org/css2/#the-width-property) or [height](https://drafts.csswg.org/css2/#the-height-property)) of `auto`.
-    >
-    > - Originally, `flex-basis:auto` meant "look at my `width` or `height` property".
-    > - Then, `flex-basis:auto` was changed to mean automatic sizing, and "main-size" was introduced as the "look at my `width` or `height` property" keyword. It was implemented in [Firefox bug 1032922](https://bugzil.la/1032922).
-    > - Then, that change was reverted in [Firefox bug 1093316](https://bugzil.la/1093316), so `auto` once again means "look at my `width` or `height` property"; and a new `content` keyword is being introduced to trigger automatic sizing. ([Firefox bug 1105111](https://bugzil.la/1105111) covers adding that keyword).
-
 ## Formal definition
 
 {{cssinfo}}
@@ -187,6 +180,8 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w
 
 ## See also
 
+- {{cssxref("flex")}} shorthand
+- {{cssxref("inline-size")}}
 - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)
 - [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)
-- {{cssxref("width")}}
+- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module