React inline CSS style with fallback

Is this the correct way to apply fallback for width with vendor prefixes and finally percentage for browsers that don't support 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>

The only one thats applied in the html inspector is the very last one:

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