html - 只让部分子元素溢出 :visible

Question

我需要 overflow-x: scroll like 在我的 image 的第一部分，并且溢出对比其父级更大的 div 可见，就像我的 image 的第 2 部分一样.

所以我的问题是当我将 overflow:visible 添加到父 div 时，它里面的所有溢出都是可见的。我想让 overflow:visible，但在父 div 上保留 overflow-x:scroll。有可能吗？

HTML:

<div id="wrapper">
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
</div>

CSS:

#wrapper {
    height: 200px;
    width: 400px;
    white-space:nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin:auto;
    background-color: rgb(240,240,240);
    position: relative;
    z-index: 1;
}
.content {
    width: 200px;
    height: 100%;
    overflow-x: hidden;
    display: inline-block;
    position: relative;
    z-index: 100;
    background-color: rgb(200,200,200);
}

.child {
    width: 200px;
    height: 50%;
    position: absolute;
    left: 0;
    top: 0;
    /* transform: translateX(50%); */
    background-color: #bada55;
    border-radius: 5px;
    z-index: 200;
    transition: all .15s ease-in-out;
    text-align: center;
}

div.child.active {
    width: 400px;
    left: -50%;
    background-color: #111
}

一堆 JS:

window.action = function(el) {
  var parent = el.parentNode;
  if(parent.classList.contains('active')) {
    parent.classList.remove("active");
  } else {
    parent.className += " active";
  }
};

Answer 1

一个快速的解决方法是在你的子选择器上使用 !important，像这样:

.parent {
  overflow: visible;
}

.child {
  overflow: hidden !important;
}

!important 只是告诉系统使用样式而不是继承父级的样式。您还可以使用直接子选择器 >。