HTML Guides for Elementor

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

<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

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