溢出-X可见和溢出-γ隐藏有突出超出元件具有相对定位

Question

我有以下structure and styles (CodePen)

.wrap { 
 
    width: 50%; 
 
    margin-left: 25%; 
 
    background-color: red; 
 
    overflow-y: hidden; 
 
    padding-top: 16px; 
 
    padding-bottom: 16px; 
 
    
 
} 
 
.content { 
 
    width: 50%; 
 
    float: left; 
 
    height: 100px; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 
.toggle { 
 
    position: absolute; 
 
    height: 32px; 
 
    width: 32px; 
 
    background-color: cyan; 
 
    border-radius: 16px; 
 
    top: calc(50% - 16px); 
 
    right: -16px; 
 
    z-index: 10; 
 
} 
 
.border { 
 
    height: calc(100% - 10px); 
 
    width: calc(100% - 10px); 
 
    border: 5px dashed purple; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div class='wrap'> 
 
    <div class='content'> 
 
     <div class='toggle'></div> 
 
     <div class='border'></div> 
 
    </div> 
 
    <div class='content'> 
 
     <div class='toggle'></div> 
 
     <div class='border'></div> 
 
    </div> 
 
</div

我必须包装纸上部和底部内边距与浮动元素。为此，我添加了overflow-y: hidden;，但<ul>有滚动条。根据这question这是由于overflow-x行为。但带有附加包装的解决方案对我来说不起作用，这可能是因为切换的相对位置。

有没有解决方案，最好没有结构的深刻变化？

UPD：div.wrap在<li>这是在列表中与许多项目具有相同的内容，因此绝对定位是不可能的。

Answer 1

您应该清除float，您在wrap内应用。同时删除你正在申请的overflow，你去！

请让我知道您的反馈。谢谢！

.wrap { 
 
    width: 50%; 
 
    margin-left: 25%; 
 
    background-color: red; 
 
    padding-top: 16px; 
 
    padding-bottom: 16px; 
 
    
 
} 
 
.content { 
 
    width: 50%; 
 
    float: left; 
 
    height: 100px; 
 
    background-color: green; 
 
    position: relative; 
 
} 
 
.toggle { 
 
    position: absolute; 
 
    height: 32px; 
 
    width: 32px; 
 
    background-color: cyan; 
 
    border-radius: 16px; 
 
    top: calc(50% - 16px); 
 
    right: -16px; 
 
    z-index: 10; 
 
} 
 
.border { 
 
    height: calc(100% - 10px); 
 
    width: calc(100% - 10px); 
 
    border: 5px dashed purple; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div class='wrap'> 
 
    <div class='content'> 
 
     <div class='toggle'></div> 
 
     <div class='border'></div> 
 
    </div> 
 
    <div class='content'> 
 
     <div class='toggle'></div> 
 
     <div class='border'></div> 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
</div