子元素溢出隐藏在具有溢出的父级：隐藏

我的布局的一部分包含三列的div。 我想这个div有一个圆角，因为这个原因，我添加了一个边界半径和溢出隐藏到父元素。 但是，这使得这个div中的孩子的任何溢出隐藏。

一个明显的解决方案是去除隐藏在父元素上的溢出，并在第一个子元素上设置边界左上半径，边界左下半径等，然后执行边界右上半径border-最后一个孩子的右下半径，因为这不会影响第二个元素的溢出。

我不喜欢使用绝对位置来表示子元素，因为div中有多个元素，并且为了响应而工作会很烦人。

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/63039.html

上一篇: Child elements overflow is hidden in parent with overflow: hidden

下一篇: Element centered with position:absolute plus zero padding