HTML Guides for flex

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

<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

<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.