title: content shrinks with narrow width and scrollbar has extra little space from the div
body: <p>I have the made the following layout and i want the div columns with and without scrollbar to not shrink when screen gets narrowed, i tried min-width by using that div stay the same width and the layout breaks at a certain point because the screen cant fit the whole interface with the avaliable screen width. is there a way i can achieve this?
  another problem is that there is little space between the div which has content and scrollbar, i wonder how can i remove that? help me out here.
  I'm attaching a video and the code to help you guys understand. <a href="https://www.awesomescreenshot.com/video/7862211?key=926bf6aea6708aabe724e4d1174ba114" rel="nofollow noreferrer">https://www.awesomescreenshot.com/video/7862211?key=926bf6aea6708aabe724e4d1174ba114</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      margin: 0;
      padding: 0;
  }
  html, body {
      margin: 0;
      padding: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      color: white;
  }
  /**** Main Layout container ****/
  .container {
      display: flex;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }
  /**** Sidebar Static Left ****/
  .sidebar {
      width: 12%;
      height: 100%;
      background-color: #f1f1f1;
      overflow-y: scroll;
      position: absolute;
      top: 0;
      left: 0;
  }
  /*** Fluid Container ***/
  .fluid-container {
      width: 88%;
      height: 100%;
      background-color: cadetblue;
      position: absolute;
      left: 12%;
      overflow: hidden;
  }
  .navbar {
          width: 100%;
          text-align: center;
          background-color: skyblue;
          color: #484545;
          font-size: 1.7rem;
          display: flex;
          justify-content: center;
  }
  
  .header h1 {
      border: 2px solid skyblue;
      width: 180px;
      display: block;
      margin: 0 auto;
      font-size: 1.5rem;
      border-radius: 3px;
      background-color: skyblue;
      color: rgb(31, 30, 30);
  
  }
  /*** Title Box Containers ***/
  .box-container {
      width: 100%;
      background-color: skyblue;
      display: flex;
      height: 100%;
  }
  .box {
      width: 50%;
      border: 2px solid rgb(229 221 221);
      background-color: skyblue;
      display: flex;
  }
  .item {
      width: 1375%;
      border: 2px solid rgb(229 221 221);
     margin: 0 7px;
     background-color: #f1f1f1;
  }
  #item2 {
      overflow-y: scroll;
      height: calc(100% - 4.5%);
  }
  #item1 {
      height: calc(100% - 50%);
  }
  #item3 {
      height: calc(100% - 30%);
  }
  h1 {
      border: 2px solid skyblue;
  }
  h3 {
      border: 2px solid skyblue;
      text-align: center;
      border-radius: 7px;
      background-color: skyblue;
      color: #484545;
      font-size: 1.7rem;
  }
  p {
      text-align: left;
      padding: 0px 4px;
      color: rgb(31, 30, 30);
  }
  
  /* The side navigation menu */
  .sidenav {
      height: 100%; 
      width: 0; 
      position: fixed; 
      z-index: 1; 
      top: 0; 
      right: 0;
      background-color: #f1f1f1; 
      overflow-x: hidden; 
      padding-top: 60px; 
      transition: 0.5s;
    }
    span {
      float: right;
      margin: -41px 17px 0px 0px;
      color: black;
      font-size: 2.5rem;
      position: absolute;
      top: 35px;
      right: 5px;
      cursor: pointer;
    }
    
    /* The navigation menu links */
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
      cursor: pointer;
    }
    
    
    
    
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
      color: black;
    }
    
    /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="container"&gt;
          &lt;div class="sidebar bg-slate-50"&gt;
              &lt;h3&gt;Title&lt;/h3&gt;
              &lt;p&gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas suscipit aliquid nobis eius harum
                  ipsam eum perferendis modi excepturi laudantium, rerum recusandae nulla odio ullam aliquam aut quam ea
                  cupiditate officiis? Tempora corrupti, officiis placeat quam praesentium quis dolores itaque repudiandae
                  libero voluptates consequatur repellat, temporibus et laboriosam, accusantium ducimus quia distinctio a
                  iste quaerat culpa ex cum. Officia laborum nesciunt quidem. Aliquid possimus soluta dolores obcaecati
                  doloribus aut corrupti, at tenetur odit optio, facilis ipsam natus illum magni voluptas, quos animi.
                  Sunt laudantium ut itaque, aperiam provident, nisi officiis inventore perspiciatis tenetur quidem
                  sapiente natus vel ipsum omnis ad quia nemo ipsam in harum? Distinctio tempora quis facere animi
                  molestiae iste quas voluptas iusto quaerat, officia modi aliquam earum saepe at est, suscipit vitae
                  optio alias doloribus ea molestias illum impedit? Culpa sint, iure, illo provident officia minima
                  consectetur, ea autem ut atque dolore quaerat dolor adipisci odio accusantium dolores dolorum odit rem
                  dignissimos soluta. Veniam laborum, sint qui ad nemo ipsam voluptates magnam iure consectetur
                  reprehenderit adipisci sed quos placeat ipsa aperiam repudiandae officia? Eum dicta quod, laudantium
                  fugit harum delectus consequuntur facere amet autem eius maxime hic vel repudiandae eaque excepturi
                  natus quia ullam temporibus veritatis illo libero. Ullam totam consequatur eius voluptas eaque odit odio
                  corporis a quam eligendi. Ducimus nihil molestiae possimus quaerat alias voluptatibus velit consequatur
                  reprehenderit? Voluptatem corporis, eaque omnis delectus explicabo unde, molestiae debitis fuga ad
                  quaerat inventore impedit dolore recusandae deleniti voluptates enim tempora dignissimos numquam quod
                  quam perferendis nisi tenetur hic saepe? Reprehenderit veritatis ex sed, repudiandae accusantium
                  voluptates dignissimos velit vel, iure aspernatur doloremque dolores quasi provident placeat harum
                  autem, accusamus ad non ducimus quae sint! Quo similique consequatur earum ducimus laboriosam, hic odit
                  pariatur quas distinctio facere, fugiat, illo impedit nulla ratione iste quam quis autem beatae
                  obcaecati esse laudantium? Adipisci et vero eum minus dolorum odio eligendi sint voluptatem nesciunt eos
                  quisquam possimus ducimus nulla harum maxime neque alias culpa, dolores dolor laborum non! Ea
                  praesentium dolor quidem tenetur neque, impedit similique exercitationem eligendi illo ipsa, minima iure
                  doloremque veritatis! Similique, aspernatur sit tenetur facilis reprehenderit officia? Tenetur voluptas
                  at quia, officiis vero esse nam deleniti et voluptatibus corrupti inventore voluptates necessitatibus
                  eos ipsum, recusandae facilis ipsa quas suscipit enim illum voluptatum voluptatem numquam dolorem?
                  Recusandae aperiam veritatis quidem? Quidem est maxime quo officiis esse similique maiores accusamus
                  iure quis cum ad, nobis illum officia obcaecati saepe eaque dignissimos corrupti facilis aperiam vero
                  quaerat quod? Nesciunt pariatur cupiditate saepe dolorum doloribus quisquam quis cumque commodi magnam,
                  nostrum fuga, hic dolores quod neque perferendis exercitationem quo repudiandae facere! Porro molestiae,
                  rem mollitia asperiores ducimus cum sapiente quam, sequi aut incidunt voluptatum ad autem ratione
                  tempore illum, voluptatem magni non ipsam quo praesentium quaerat suscipit id. Perferendis corporis
                  porro, doloremque praesentium beatae harum cumque ex. Minima similique reprehenderit consequuntur
                  asperiores optio, repellat esse possimus neque consectetur delectus repudiandae, doloremque nesciunt
                  repellendus debitis animi distinctio officia fuga ullam molestias corporis architecto cumque eos nisi.
                  Voluptas optio hic veritatis culpa esse?&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="fluid-container"&gt;
              &lt;div class="navbar"&gt;
                  &lt;div class="header"&gt;
                      &lt;h1&gt;Header Section&lt;/h1&gt;
                      &lt;div id="mySidenav" class="sidenav"&gt;
                          &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
                          &lt;a href="#"&gt;About&lt;/a&gt;
                          &lt;a href="#"&gt;Services&lt;/a&gt;
                          &lt;a href="#"&gt;Clients&lt;/a&gt;
                          &lt;a href="#"&gt;Contact&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;span onclick="openNav()"&gt;
                      &lt;ion-icon name="menu-outline"&gt;&lt;/ion-icon&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="box-container"&gt;
                  &lt;div id="box1" class="box"&gt;
                      &lt;div id="item1" class="item"&gt;
                          &lt;h3&gt;Title 1&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div id="item2" class="item"&gt;
                          &lt;h3&gt;Title 2&lt;/h3&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas
                              tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum
                              voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati quisquam sit vero a,
                              vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio,
                              explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos
                              cupiditate, ipsa facere inventore laudantium ducimus dicta sunt quidem, nam harum. Esse
                              iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe
                              necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae
                              repellat odit. Ad voluptates iure tenetur explicabo excepturi!&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="item3" class="item"&gt;
                          &lt;h3&gt;Title 3&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="box2" class="box"&gt;
                      &lt;div id="item1" class="item"&gt;
                          &lt;h3&gt;Title A&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div id="item2" class="item"&gt;
                          &lt;h3&gt;Title B&lt;/h3&gt;
                          &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam laborum doloremque quas
                              tempora deleniti molestiae ullam nostrum repellat quae commodi, quaerat labore, rerum
                              voluptatibus perferendis ex cupiditate excepturi officiis! Obcaecati quisquam sit vero a,
                              vitae laborum eius reiciendis placeat nemo provident ea labore incidunt? Distinctio,
                              explicabo? Ab asperiores eos quasi eum blanditiis ipsum ut reprehenderit nostrum dignissimos
                              cupiditate, ipsa facere inventore laudantium ducimus dicta sunt quidem, nam harum. Esse
                              iure, voluptate ducimus a voluptatem expedita quas nam officia obcaecati saepe
                              necessitatibus exercitationem quo iusto, libero omnis? Earum esse, dolor quo non vitae
                              repellat odit. Ad voluptates iure tenetur explicabo excepturi!&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="item3" class="item"&gt;
                          &lt;h3&gt;Title C&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
  
          function openNav() {
              document.getElementById("mySidenav").style.width = "250px";
          }
  
  
          function closeNav() {
              document.getElementById("mySidenav").style.width = "0";
          }
      &lt;/script&gt;
  
      &lt;script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"&gt;&lt;/script&gt;
      &lt;script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>