Skip to content

Commit

Permalink
Remove flex-basis fill (mdn#17693)
Browse files Browse the repository at this point in the history
  • Loading branch information
dipikabh authored Jun 27, 2022
1 parent 300e1f3 commit 1c06ca5
Showing 1 changed file with 2 additions and 11 deletions.
13 changes: 2 additions & 11 deletions files/en-us/web/css/flex-basis/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ The **`flex-basis`** [CSS](/en-US/docs/Web/CSS) property sets the initial main s

{{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`.
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 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.
> **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.
## Syntax

Expand All @@ -34,7 +34,6 @@ flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
Expand Down Expand Up @@ -167,14 +166,6 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w
.flex5:after {
content: 'content';
}

.flex6 {
flex-basis: fill;
}

.flex6:after {
content: 'fill';
}
```

#### Results
Expand Down

0 comments on commit 1c06ca5

Please sign in to comment.