scrollbar of parent div overlaps child div

Question

This issue is Chrome specific.

I have a container div with position: fixed and inside it I have a popup div with position: fixed

Only on Chrome, the scrollbar of container div overlaps my popup div. (See image attached)

Please help me get rid of scrollbar from popup div.

Edit: Adding Code to explain the problem:

html, body {
    height: 100%;
}
body {
    margin:0;
}
#content {
    position: fixed;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 5px;
    width:300px;
    overflow-y: scroll;
}
#messages {
    overflow: auto;
}
#messages .message {
    height: 79px;  
    background: #999;
    border-bottom: 1px solid #000;
}
.popup {
  position: fixed;
  width:250px;
  height:200px;
  background-color:red;
  top: 50px;
  left: 200px
}
.popup .videoTag {
  width: 100%;
  height: 100%;
}

<div id="container">
   
    <div id="content">
        <div id="messages">
            <div class="message">example</div>
            <div class="message">example</div>
            
            <div class="popup">
            <video class="videoTag" controls>
           <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">  
            Your browser does not support HTML5 video.
            </video>
            </div>
            <div class="message">example</div>
            <div class="message">example</div>
            <div class="message">example</div>
            <div class="message">example</div>
           
        </div>
       
    </div>
</div>

Answer 1

Paste your popup markup outside of the #content div. Check the snippet below:

html, body {
    height: 100%;
}
body {
    margin:0;
}
#content {
    position: fixed;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 5px;
    width:300px;
    overflow-y: scroll;
}
#messages {
    overflow: auto;
}
#messages .message {
    height: 79px;  
    background: #999;
    border-bottom: 1px solid #000;
}

.popup {
  position: fixed;
  width:250px;
  height:200px;
  background-color:red;
  top: 50px;
  left: 200px;
  z-index:99;
}
.popup .videoTag {
  width: 100%;
  height: 100%;
}

<div id="container">
   
    <div id="content">
        <div id="messages">
            <div class="message">example</div>
            <div class="message">example</div>
            <div class="message">example</div>
            <div class="message">example</div>
            <div class="message">example</div>
            <div class="message">example</div>
           
        </div>
       
    </div>
    
            
            <div class="popup">
            <video class="videoTag" controls>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">  
            Your browser does not support HTML5 video.
            </video>
            </div>
</div>