Child elements overflow is hidden in parent with overflow: hidden

A part of my layout contains a div with three columns. I want this div to have a round corners, for this reason I added a border-radius and overflow hidden to the parent element. However, this makes any overflow of the children in this div hidden.

An obvious solution would be to remove the overflow hidden on the parent element, and set border-top-left-radius, border-bottom-left-radius etc on the first child, and do border-top-right-radius, border-bottom-right-radius on the last child, since this wouldn't affect the overflow of the second element.

I'm not a fan of using position absolute for the child element, since there's multiple elements in the div, and it would be annoying to work with for responsiveness.

document.getElementById("dropdown").addEventListener("click", function() {
  document.getElementById("myDropdown").classList.toggle("show");
});

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}

#dropdown {
  float: right;
  position: relative;
  display: inline-block;
  z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  right: 0;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f1f1f1
}

.show {
  display: block;
}

.flex {
  display: flex;
  border-radius: 50px;
  overflow: hidden;
}

.flex-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  background: #484848;
  width: 100%;
  height: 175px;
  margin: 5px;
}

<div class="flex">
  <div class="flex-child"></div>
  <div class="flex-child">
    <p>Select your time</p>
    <div id="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div id="myDropdown" class="dropdown-content">
        <a>0</a>
        <a>10</a>
        <a>20</a>
        <a>30</a>
        <a>40</a>
        <a>50</a>
      </div>
    </div>
  </div>
  <div class="flex-child"></div>
</div>

链接地址: http://www.djcxy.com/p/63040.html

上一篇: 在Flask中使用Google OAuth2

下一篇: 子元素溢出隐藏在具有溢出的父级：隐藏