Using percentages in $container-max-widths

[raky291]

This issue is back #20123

I'm using Bootstrap 4.4.1

I'm trying to use percentages in $container-max-widths but throw in an error

SassError: Incompatible units: '%' and 'px'.
        on line 29 of node_modules/bootstrap/scss/_grid.scss, in mixin `@content`
        from line 62 of node_modules/bootstrap/scss/mixins/_breakpoints.scss, in mixin `media-breakpoint-up`
        from line 23 of node_modules/bootstrap/scss/_grid.scss
        from line 6 of client/styles/vendors/_bootstrap.scss
        from line 2 of XXX\client\styles\styles.scss
>>         @if ($container-max-width > $width or $breakpoint == $name) {

   -------------^

Sample code

// Grid containers

$container-max-widths: (
    sm: 90%,
    md: 90%,
    lg: 960px,
    xl: 1440px
);

[febLey]

The same error occurs when you use rem containers with em media queries.
And rem media queries don't work as expected in Safari.

$grid-breakpoints: (
  xs: 0,
  sm: 36em,
  md: 48em,
  lg: 62em,
  xl: 78em
);

$container-max-widths: (
  sm: 54rem,
  md: 72rem,
  lg: 96rem,
  xl: 120rem
);

Error: Incompatible units: 'rem' and 'em'.
        on line 29 of node_modules/bootstrap/scss/_grid.scss, in mixin `@content`
        from line 62 of node_modules/bootstrap/scss/mixins/_breakpoints.scss, in mixin `media-breakpoint-up`
        from line 23 of node_modules/bootstrap/scss/_grid.scss
        from line 35 of fileadmin/wwrazor/styles/bootstrap-custom.scss
        from line 4 of fileadmin/wwrazor/styles/main.scss
>>         @if ($container-max-width > $width or $breakpoint == $name) {

   -------------^

[sstottelaar]

Is there a known workaround for this issue? This issue hasn't released yet, so I'm looking for a (temporary) solution. Unfortunately, I can't downgrade to a specific version since other packages depend on this version.