显示以下元素溢出：隐藏

Question

这是交易，我有下面overflow: hidden div overflow: hidden ，需要以某种方式设法显示它们。

 .body { display:flex; width: 100%; height: 100%; } .main-container { background-color: #eee; width: 560px; height: 500px; } .sidebar-container { width: 270px; height: 100px; } .sidebar-container_hidden-scroll { width: 100%; height: 100%; } .sidebar-element { width: 250px; height: 44px; position: relative; box-sizing: border-box; margin: 10px 5px; padding: 5px; border: 1px solid red } .sidebar-element__linked-div { position: absolute; height: 100%; width: 500px; border: 1px dotted red; top: 0px; left: calc(250px + 30px); } 

 <div class="body"> <div class="sidebar-container"> <div class="sidebar-container_hidden-scroll"> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> </div> </div> <div class="main-container"> </div> </div> 

添加parent:: overflow: hidden, children:: overflow: scroll

 .body { display:flex; width: 100%; height: 100%; } .main-container { background-color: #eee; width: 560px; height: 500px; } .sidebar-container { width: 270px; height: 100px; overflow-y: hidden; overflow-x: hidden; } .sidebar-container_hidden-scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; padding-right: 20px; } .sidebar-element { width: 250px; height: 44px; position: relative; box-sizing: border-box; margin: 10px 5px; padding: 5px; border: 1px solid red } .sidebar-element__linked-div { position: absolute; height: 100%; width: 500px; border: 1px dotted red; top: 0px; left: calc(250px + 30px); } 

 <div class="body"> <div class="sidebar-container"> <div class="sidebar-container_hidden-scroll"> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> </div> </div> <div class="main-container"> </div> </div> 

我添加这些行的原因是滚动内容并隐藏滚动条。 我的目标是制作“可滚动”内容，隐藏滚动条并仍能看到虚线矩形。 我怎样才能做到这一点？ （ z-index没有帮助）

Answer 1

在我看来，你需要将其中一个定位为绝对。
如果您已经使用flex与父级，则可以使用flex-direction:reverse来使.main-container保持在右侧。

 .body { display:flex; flex-direction: row-reverse; width: 100%; height: 100%; } .main-container { background-color: #eee; width: 560px; height: 500px; } .sidebar-container { width: 100%; height: 100px; overflow-y: hidden; overflow-x: hidden; position:absolute; left: 0; } .sidebar-container_hidden-scroll { width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; padding-right: 20px; } .sidebar-element { width: 250px; height: 44px; position: relative; box-sizing: border-box; margin: 10px 5px; padding: 5px; border: 1px solid red } .sidebar-element__linked-div { position: absolute; height: 100%; width: 500px; border: 1px dotted red; top: 0px; left: calc(250px + 30px); } 

 <div class="body"> <div class="sidebar-container"> <div class="sidebar-container_hidden-scroll"> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> <div class="sidebar-element"> <div class="sidebar-element__linked-div"></div> <div class="sidebar-element__name"> Yellow flower </div> <div className="sidebar-element__capacity"> 10 kg </div> </div> </div> </div> <div class="main-container"> </div> </div>