# CSS: “--container-widget-width”: The types are incompatible.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-container-widget-width-the-types-are-incompatible
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The value of the `--container-widget-width` custom property has a math expression that combines values of incompatible types.

Elementor sets this variable on widgets placed inside a Flexbox Container. When you give a widget a custom width in its Advanced tab, Elementor writes the value into the page CSS as `--container-widget-width` and applies it with `width: var(--container-widget-width, 100%)`. The "custom" unit accepts any expression, so a typo there ends up in the page unchanged.

A custom property can hold almost any value, and the validator doesn't check whether the result is a length. It does check the math inside `calc()`, `min()`, `max()` and `clamp()`, where every value you add, subtract or compare must have the same type. A unitless number next to a length breaks that rule, as in `calc(100vw - 40)`. Browsers reject that expression too: the `width` that reads the variable becomes invalid at computed-value time and acts as if it were unset. The `100%` fallback in `var()` doesn't apply, because the variable is defined.

The expression Elementor generates for its default widths, `calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% )`, passes the check. If you see this error, look for a custom width set on one of the widgets and add the missing unit.

## Invalid example

```html
<style>
  .elementor-element-a1b2c3d {
    --container-widget-width: calc(100vw - 40);
    --container-widget-flex-grow: 0;
    width: var(--container-widget-width, 100%);
    max-width: 100%;
  }
</style>
```

## Valid example

```html
<style>
  .elementor-element-a1b2c3d {
    --container-widget-width: calc(100vw - 40px);
    --container-widget-flex-grow: 0;
    width: var(--container-widget-width, 100%);
    max-width: 100%;
  }
</style>
```