Overflow Issue in Child of Flexbox Item Has No Scrollbar in Chrome on Mac OS

Question

I am having an issue with a overflow-y container within a flexbox item that is scrolling vertically just fine, but it is not showing a scrollbar when scrolling.

I need help figuring out how to make the scrollbar appear as it would normally be.

This is happening in a slide-in drawer I just made.

So far the scrollbar appears for me on Firefox and Safari. I am on Mac OS.

Here is a link to a codepen I made. Make sure your viewport is short enough to be able to scroll vertically. I removed the js functionality and left my slide-in open: https://codepen.io/ChidoYo/pen/abvaVRx

Note: If you try to run the code snippet herein you may not be able to view as I intend it to be. I recommend viewing the Codepen.

body {
 background: #fff;
 font-family: Helvetica;
}

.navbar {
 height: 60px;
}

.container {
 padding-top: 25px;
}

body.drawer-open {
 overflow-y: hidden !important;
}

.drawer-overlay {
 background-color: rgba(0, 0, 0, 0.52);
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 1100;
 transform: scale(0);
 opacity: 0;
 transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.drawer-overlay.active {
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
 transform: scale(1);
}

.drawer-overlay.fade-out {
 opacity: 0;
}

.drawer-content {
 box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
 display: flex;
 align-content: stretch;
 background-color: #fff;
 position: fixed;
 top: 0;
 bottom: 0;
 z-index: 1101;
 transition: right 0.2s ease-in-out;
 width: 100%;
 right: -101%;
}

@media (min-width: 768px) {
 .drawer-content {
  width: 340px;
  right: -341px;
 }
}

.drawer-content.extra-large {
 width: 100%;
 right: -100%;
}

@media (min-width: 768px) {
 .drawer-content.extra-large {
  width: 75vw;
  right: -75vw;
 }
}

.drawer-content.active {
 transition: right 0.2s ease-in-out;
 right: 0;
}

.drawer-content.active.delay {
 transition-delay: 0.2s;
}

.drawer-content .drawer-item {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
}

.drawer-content .drawer-item.first-item {
 flex: 0 1 auto;
 padding: 18px;
 border-right: 1px solid #dee2e6;
}

.drawer-content .drawer-item .drawer-row {
 padding: 18px;
}

.drawer-content .drawer-item .drawer-row:first-child {
 overflow-y: auto;
 flex: 2;
 border-bottom: 1px solid #dee2e6;
 padding-top: 0;
}

.drawer-content .drawer-item .drawer-row:last-child {
 height: 80px;
}

.drawer-content .drawer-item .drawer-row .drawer-header {
 position: sticky;
 z-index: 10;
 top: 0;
 width: 100%;
 padding-top: 20px;
 background-color: white;
 box-shadow: 0px 13px 16px 1px white;
 margin-bottom: 20px;
 padding-right: 15px;
 line-height: 1.3;
 display: flex;
 align-items: baseline;
}

.drawer-content .drawer-item .drawer-row .drawer-header .drawer-close {
 flex: 0 1 auto;
 margin: 0 15px 0 0;
}

.drawer-content .drawer-item .drawer-row .drawer-header h2 {
 flex: 1 1 auto;
}

.drawer-content .drawer-item .drawer-row .drawer-main {
 padding-top: 10px;
}

.drawer-content .drawer-close {
 color: #333333;
 font-size: 24px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <div class="navbar navbar-dark bg-dark shadow-sm"></div>
</header>

<div class="container">
  
  <div class="row">
    <div class="col text-center">
      <a href="#" id="open_drawer">Open Drawer</a>
    </div>
  </div>
  
</div>

<div id="test_drawer">
  
  <div class="drawer-overlay active"></div>

  <div class="drawer-content extra-large active">    
  
    <div class="drawer-item">
  
      <div class="drawer-row">
  
        <header class="drawer-header">
          <h2>We Are Groot!</h2>
        </header>
  
        <div class="drawer-main">

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

          <p>
            We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. We are Groot. I am Groot. I am Groot. We are Groot. I am Groot. I am Groot. We are Groot. We are Groot. We are Groot. I am Groot. I am Groot. I am Groot. We are Groot. I am Groot. We are Groot. I am Groot. I am Groot. I am Groot. I am Groot. I am Groot. 
          </p>

        </div>
  
      </div>
  
      <div class="drawer-row">
        <button class="btn btn-primary m-r-xs">I Am Groot</button>
        <button class="btn btn-plain">We Are Groot</button>
      </div>
  
    </div>
  
  </div>

</div>

Your question is confusing, you say it's not showing but you tested it in FF & Safari and it is showing.. I tested it in Chrome and it is showing so what exactly is the problem here?? — Jon B, May 14 '20 at 23:19
@Jon B I do not see it working on Chrome. What version on Chrome are you on? I will edit my title to avoid confusion. — iChido, May 14 '20 at 23:30
Also working in Edge on Win 10, FF 75 on Win 10, Chrome 81 and Win 10 — Jon B, May 14 '20 at 23:53
Working here on W10-x64 FF DE 77.0b5, Edge 81.0.416.72, Chrome 81.0.4044.138, Vivaldi 3.0.1874.38 and Palemoon 28.9.2. All show a scrollbar on any viewport size. Logic dictates that when others report something to work fine, the browser on your PC probably needs a restart or the PC a reboot.... Have you tried `format C:` already?? — Rene van der Lende, May 15 '20 at 01:21
@RenevanderLende Ha-haa! I'm ahead of you on the reboot though. — iChido, May 15 '20 at 02:45
Go figure, it's almost 5pm around here. Of course you are waaaay ahead. I'm having fun with my 'Bud'....(or 3)...or 'Corona', whichever knocks me out first....Shoot I'm gmt+1, I'm ahead.... — Rene van der Lende, May 15 '20 at 02:49
AM I'm am (well, it's dark outside, just). So, I'm guessing, the only option left is `format C:`? — Rene van der Lende, May 15 '20 at 02:56
I had several associates try this on Mac - Chrome and only one could reproduce it. I decided to add css specific to making scrollbars show on Chrome and I targeted the specific element where I have overflow-y. I applied this solution: https://stackoverflow.com/questions/35201566/overflow-y-scroll-not-showing-scrollbar-in-chrome — iChido, May 15 '20 at 17:11

Overflow Issue in Child of Flexbox Item Has No Scrollbar in Chrome on Mac OS

0 Answers0