overflow-x visible 和 overflow-y hidden with elements protrusted beyond that have relative positioning

Question

.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

您应该清除在 wrap 中应用的 float。同时删除您正在应用的 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

overflow-x visible 和 overflow-y hidden with elements protrusted beyond that have relative positioning

Overflow-x visible and overflow-y hidden with elements protruding beyond that have relative positioning

html

css

overflow

css-float