Using percentages in $container-max-widths

Created by: depl0y

By default, Bootstrap v4 SASS comes with the following settings for $container-max-widths:

$container-max-widths: (
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1140px
)

While I understand that I could use container-fluid to get the container width set to 100% all the time, I would like to be able to set certain widths to a percentage.

For example:

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

This makes sure, that on smaller screens, the layout has a nice complete width, while on large screens it is bound to a max-width.

Except, setting these values causes an error while compiling the sass files: Incompatible units: 'px' and '%'.

I currently override these values by adding the following to my own sass files, but it would be nice if it could be done directly from within Bootstrap.

@media (max-width: map-get($grid-breakpoints, "lg")) {
  .container {
    max-width: 100%;
  }
}