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

Question

I have the following 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

I need to have both upper and bottom paddings in wrapper with floating elements. To do it I've added overflow-y: hidden; but <ul> have scrollbar. According to this question this is due to overflow-x behavior. But solution with additional wrapper doesn't work for me maybe cause of relative positioning of toggle.

Is there any solution, preferably without deep changes in structure?

UPD: div.wrap are in <li> that is in list with many items with the same content so absolute positioning isn't possible.

Answer 1

You should clear the float that you are applying inside wrap. Also remove the overflow that you are applying and there you go!

Please let me know your feedback. Thanks!

.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