# CSS: “flex”: “var(--flex-grow)” is not a “flex” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-flex-var-flex-grow-is-not-a-flex-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

CSS custom properties (variables) used in the `flex` shorthand are not recognized by the W3C CSS validator, even though they work correctly in all modern browsers. This is a known limitation of the validator, not a bug in your code.

The W3C CSS validator performs static analysis and cannot resolve `var()` expressions at validation time. It doesn't know that `--flex-grow` will eventually hold a valid value like `1` or `0`, so it flags the declaration as invalid. This affects many CSS properties when custom properties are used, not just `flex`.

You have a few options. You can safely ignore this specific warning since the code is valid per the CSS specification. Alternatively, you can restructure your CSS to apply the variable to a more specific property like `flex-grow` instead of the shorthand, which sometimes avoids the validator complaint.

## HTML Examples

### Before: Using `var()` in the `flex` shorthand

```html
<style>
  :root {
    --flex-grow: 1;
  }
  .item {
    flex: var(--flex-grow);
  }
</style>
<div style="display: flex;">
  <div class="item">Content</div>
</div>
```

### After: Using `var()` on individual flex properties

```html
<style>
  :root {
    --flex-grow: 1;
  }
  .item {
    flex-grow: var(--flex-grow);
    flex-shrink: 1;
    flex-basis: 0%;
  }
</style>
<div style="display: flex;">
  <div class="item">Content</div>
</div>
```

Both versions produce the same result in browsers. The second approach uses individual `flex-grow`, `flex-shrink`, and `flex-basis` properties, which may reduce validator noise. That said, this is a false positive from the validator — your original code is perfectly valid CSS.