¿Es esta la forma correcta de aplicar el respaldo para el width con los prefijos del proveedor y, finalmente, el porcentaje para los navegadores que no admiten calc ?

 <React.Fragment> <Container style={{ width: `${ this.props.portalSidebarFixed ? 100 - this.props.theme.sidebar.width.percent + "%" : "100%" }`, width: `-webkit-calc(${ this.props.portalSidebarFixed ? "100% - " + this.props.theme.sidebar.width.pixel + "px" : "100%" })`, width: `-moz-calc(${ this.props.portalSidebarFixed ? "100% - " + this.props.theme.sidebar.width.pixel + "px" : "100%" })`, width: `calc(${ this.props.portalSidebarFixed ? "100% - " + this.props.theme.sidebar.width.pixel + "px" : "100%" })`, }} ref={this.containerRef} onScroll={this.handleScroll} > </Container> </React.Fragment>

El único que se aplica en el inspector html es el último:

 <div class="sc-ZyCDH rsYcp" style="width: calc(100% - 340px);">