父 div 的滚动条与子 div 重叠

Question

这个问题是 Chrome 特有的。

我有一个容器 div，position: fixed里面有一个弹出 divposition: fixed

仅在 Chrome 上，容器 div 的滚动条与我的弹出 div 重叠。（见附图）

请帮助我从弹出的 div 中摆脱滚动条。

编辑： 添加代码来解释问题：

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

将标记粘贴到 divpopup外部#content。检查下面的代码片段：

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>