react-slick within boostrap-grid at screen resolution less 576px

Question

I use react-slick and bootstrap grid. jquery is not connected - only the bootstrap 4 scss files are used (scss / bootstrap-grid.scss and scss / utilities / _sizing.scss). Slides are located inside the grid containers:

<div className = "container">
  <div className = "row">
    <div className = "col-12">
      <Slider {... slickSettings}>
        <div className = "slider__slide">
          <div className = "row">
            <div className = "col-12">
              <div className = "row">
                <div className = "col-3">
                  left 1
                </ div>
                <div className = "col-9">
                  right 1
                </ div>
              </ div>
            </ div>
          </ div>
        </ div>
        <div className = "slider__slide">
          <div className = "row">
            <div className = "col-12">
              <div className = "row">
                <div className = "col-5">
                  left 2
                </ div>
                <div className = "col-7">
                  right 2
                </ div>
              </ div>
            </ div>
          </ div>
        </ div>
      </ Slider>
    </ div>
  </ div>
</ div>

When the screen resolution is less than 576 pixels, the problem appears - the width of the slides inside the slider becomes huge - 4473890 pixels. The problem is solved by replacing the string

$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px);

on

$container-max-widths: (xs: 320px, sm: 540px, md: 720px, lg: 960px, xl: 1140px);

in the scss bootstrap configuration file. This solution is incorrect, since the container with a screen width of less than 576 pixels has a fixed width of 320 pixels.

Answer 1

Problem solution:

$container-max-widths: (xs: 100vw, sm: 540px, md: 720px, lg: 960px, xl: 1140px);