css - 元素隐藏在溢出 :auto element 下面

Question

好的，我明白了，当离开 .wrapper 时，带有 overflow:hidden 的元素 .wrapper 的所有子元素都会被自然切割的边界框。但这里我只应用了overflow:auto。

是关于下面例子中的黑色下拉菜单:

按预期运行:https://jsfiddle.net/t13un62v/

运行有缺陷:https://jsfiddle.net/t13un62v/1/

在第二个示例中，唯一的区别是父元素的 overflow:auto 属性。我该怎么做才能防止下拉隐藏。我需要 overflow:auto 在父级上。

Answer 1

overflow: auto剪辑是否溢出:

This value indicates that the box’s content is clipped to the padding box, but can be scrolled into view (and therefore the box is a scroll container).

通常您会看到滚动条，但在您的情况下，内容会向左边缘溢出，而浏览器通常不允许向后滚动。

如果你想要滚动条，你可以使用 direction: rtl 允许向左滚动(但不能向右滚动)。

.wrapper {
  overflow: auto;
  direction: rtl;
}
.item {
  direction: ltr;
}

.wrapper {
  direction: rtl;
  width: 600px;
  height: 500px;
  background-color: #efefef;
  margin-left: 300px;
  overflow: auto;
}
.item {
  direction: ltr;
  position: relative;
  float: left;
  background-color: #444;
  color: #bbb;
  padding: 5px;
  border-top: 1px solid #888;
  border-bottom: 1px solid #000;
  border-right: 1px solid #888;
  border-left: 1px solid #000;
}
.item.open {
  background-color: #222;
}
.item > div {
  position: absolute;
  right: 0
}
ul {
  position: relative;
  background-color: black;
  width: 300px;
  display: block;
  padding: 10px;
  list-style-type: none;
  z-index: 1000000;
  right: 0;
  left: auto;
  top: 100%;
}

<div class="wrapper">
  <div class="item">Item 920394234</div>
  <div class="item">Item 0394234</div>
  <div class="item">Item 394234</div>
  <div class="item">Item 9294234</div>
  <div class="item">Item 920234</div>
  <div class="item">Item 920394234</div>
  <div class="item">Item 9204</div>
  <div class="item">Item 9203</div>
  <div class="item">Item 994234</div>
  <div class="item">Item 9394234</div>
  <div class="item">Item 924</div>
  <div class="item open">Item Menu open
    <div>
      <ul>
        <li>One</li>
        <li>One</li>
        <li>One</li>
        <li>One</li>
        <li>One</li>
      </ul>
    </div>
  </div>
  <div class="item">Item 159394234</div>
  <div class="item">Item 8139394234</div>
  <div class="item">Item s65494234</div>
  <div class="item">Item 1s23s19394234</div>
  <div class="item">Item 8416</div>
  <div class="item">Item 13</div>
</div>