Question

好的，我确实理解，当.wrapper的边界框离开overflow:hidden时，.wrapper元素overflow:auto的所有子元素都会被自然删除。但在这里我只申请了var now = DateTime.Now; var later = now.AddHours(1); //Repeat daily for 5 days var rrule = new RecurrencePattern(FrequencyType.Daily, 1) { Count = 5 }; var e = new Event { DtStart = new CalDateTime(now), DtEnd = new CalDateTime(later), RecurrenceRules = new List<IRecurrencePattern> { rrule }, }; var calendar = new Calendar(); calendar.Events.Add(e); var serializer = new CalendarSerializer(new SerializationContext()); var serializedCalendar = serializer.SerializeToString(calendar);。

这是关于以下示例中的黑色下拉菜单：

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

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

在第二个示例中，唯一的区别是父元素的overflow：auto属性。我该怎么做才能防止掉落隐藏。我需要溢出：在父级上自动。

Answer 1

overflow: auto剪辑溢出：

此值表示框的内容被剪切到填充框，但可以滚动到视图中（因此框是scroll container）。

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

如果您想要滚动条，可以使用direction: rtl向左滚动（但不能向右滚动）。

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

您必须摆脱.wrapper，因此，您应该将absolute添加到.open。

.item.open{
  position:absolute;
}

查看所有代码：https://jsfiddle.net/t13un62v/3/

元素隐藏在overflow：auto元素下面

2 个答案: