Invalid value for $container-max-widths

Using this grid container:

$container-max-widths: (
    sm: 100%,
    md: 100%,
    lg: 100%,
    xl: 1140px
);

Works, but leads to these warnings:

WARNING: Invalid value for $container-max-widths: This map must be in ascending order, but key 'md' has value 100% which isn't greater than 100%, the value of the previous key 'sm' !
Backtrace:
	node_modules/bootstrap/scss/_variables.scss:53, in mixin `-assert-ascending`
	node_modules/bootstrap/scss/_variables.scss:226

WARNING: Invalid value for $container-max-widths: This map must be in ascending order, but key 'lg' has value 100% which isn't greater than 100%, the value of the previous key 'md' !
Backtrace:
	node_modules/bootstrap/scss/_variables.scss:53, in mixin `-assert-ascending`
	node_modules/bootstrap/scss/_variables.scss:226

WARNING: Potentially invalid value for $container-max-widths: This map must be in ascending order, but key 'xl' has value 1140px whose unit makes it incomparable to 100%, the value of the previous key 'lg' !
Backtrace:
	node_modules/bootstrap/scss/_variables.scss:51, in mixin `-assert-ascending`
	node_modules/bootstrap/scss/_variables.scss:226

[mdo]

Closing as a dupe of #19113. You need to use pixels for these for now.

[tillkruss]

Solved it like this:

.container {
    @each $breakpoint, $container-max-width in $container-max-widths {
        @if $breakpoint != 'xl' {
            @include media-breakpoint-down($breakpoint, $grid-breakpoints) {
                width: 100%;
                max-width: 100%;
            }
        }
    }
}