CSS：overflow-y：auto或溢出-y：scroll隱藏偽元素

Question

我有一個包含一些動態信息的div，它有一個看起來像箭頭的偽元素，

HTML：

<div id="outer">
  <div id="inner">
    something
  </div>
</div>

#inner div將具有一些動態信息列表。 #outer div的CSS：

#outer{
  width:100vw;
  height:100vh;
  background-color:grey;
}

#inner div的CSS：

    width: 30%;
  margin-left:15px;
  border-radius: 4px;
  float:left;
  height: calc(100vh - 40px);
  background-color: #ffffff;
  margin-left:50px;
  position:relative;

偽元素的CSS：

content: " ";
position: absolute;
left: -25px;
top: 50px ;
border-top: 25px solid transparent;
border-right: 25px solid #FFFFFF;
border-left: none;
border-bottom: 25px solid transparent;

在向#inner div添加overflow-y:auto或overflow-y:scroll時， #inner元素被隱藏。

jsfiddle： http : //jsfiddle.net/o3g0p1dx/3/

我該如何克服？ 我需要同時顯示偽元素和div上的滾動條。

Answer 1

我不是HTML / CSS專家，但是僅添加一個包裝並將箭頭添加到#wrapper和滾動條添加到#inner元素呢？

<div id="outer">
  <div id="wrapper">
  <div id="inner">
    something
  </div>
  </div>
</div>

#outer{
  width:100vw;
  height:100vh;
  background-color:grey;
}

#wrapper{
    width: 30%;
  margin-left:15px;
  border-radius: 4px;
  float:left;
  height: calc(100vh - 40px);
  background-color: #ffffff;
  margin-left:50px;
  position:relative;
  overflow-y:visible
}

#inner{
  height:calc(100% - 20px);
  width:calc(100% - 20px);
  overflow-y:scroll;
  padding:10px;
}

#wrapper::after{
  content: " ";
position: absolute;
left: -25px;
top: 50px ;
border-top: 25px solid transparent;
border-right: 25px solid #FFFFFF;
border-left: none;
border-bottom: 25px solid transparent;
}

jsfiddle： http : //jsfiddle.net/o3g0p1dx/21/

Answer 2

嘗試運行此代碼段，看看這是否達到您的目的。

 #outer{ width:100vw; height:100vh; background-color:grey; } #inner{ width: 30%; margin-left:15px; border-radius: 4px; float:left; background-color: #ffffff; margin-left:50px; position:absolute; top:0px; left:0px; height:calc(100vh - 40px); } .test { height:calc(100vh - 40px); overflow:auto; position:relative; } #test::after{ content: " "; position: absolute; left: 25px; top: 50px ; border-top: 25px solid transparent; border-right: 25px solid #FFFFFF; border-left: none; border-bottom: 25px solid transparent; } 

 <div id="outer"> <div id="test" class="test"> <div id="inner"> something </div> </div> </div> 

Answer 3

我相信以下方法可以解決您的問題。 我在#inner-content元素中添加了overflow-y: scroll ，以使內容可滾動。

 #outer { width: 100vw; height: 100vh; background-color: grey; } #inner { width: 30%; margin-left: 15px; border-radius: 4px; float: left; height: calc(100vh - 40px); background-color: #ffffff; margin-left: 50px; position: relative; } #inner::after { content: " "; position: absolute; left: -25px; top: 50px; border-top: 25px solid transparent; border-right: 25px solid #FFFFFF; border-left: none; border-bottom: 25px solid transparent; } #inner-content { height: 100%; width: 100%; overflow-y: scroll; } 

 <div id="outer"> <div id="inner"> <div id="inner-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>