溢出-x可见和溢出隐藏的元素突出超过具有相对定位的元素

Question

我有以下structure and styles (CodePen)

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

我需要在包含漂浮元素的包装中同时使用上部和底部填充。为此，我添加了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