html - 在具有负载掩码和固定宽度的溢出隐藏容器中截取下拉菜单

固定宽度的容器，带有垂直滚动条（如果视口中容纳的物品过多）-这意味着浏览器将overflow-x设置为auto。

现在里面是带有表单元素的卡片。每个卡都有一个加载掩码。
表单元素可以具有一个下拉菜单（日期，多重选择等）-但如果它们不适合侧边栏，则会被切除。

jsfiddle示例显示了问题：
蓝色区域是潜在的下拉列表。
绿色是加载掩码。

如果我从卡类中删除相对位置，则蓝色菜单会按预期工作-但加载掩码已损坏。

我怎样才能让他们两个都工作？

http://jsfiddle.net/wLnhh0uz/

CSS：

.sidebar {
  width: 280px;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: grey;
}

.card {
  width: 240px;
  min-height: 50px;
  background-color: white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 10px;
}

.formitem {
  height: 60px;
}

.absoluteformitem {
  position: absolute;
}

.absoluteformitem .absoluteitem {
  position: absolute;
  width: 400px;
  height: 100px;
  background-color: blue;
  z-index: 100;
}

.content {
  flex-grow: 1;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.loadmask {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: green;
  opacity: 0.5;
  z-index: 101;
}

<div class="sidebar">
  <div class="card">
    <div class="content">
      <div class="formitem">
        formitem1
      </div>
      <div class="formitem absoluteformitem">
        <div class="absoluteitem"></div>
      </div>
      <div class="formitem">
        formitem3
      </div>
      <div class="formitem">
        formitem4
      </div>
    </div>
    <div class="loadmask"></div>
  </div>
  <div class="card">
    <div class="content">
      <div class="formitem">
        formitem1
      </div>
      <div class="formitem">
        formitem2
      </div>
      <div class="formitem">
        formitem3
      </div>
      <div class="formitem">
        formitem4
      </div>
    </div>
    <div class="loadmask"></div>
  </div>
</div>

最佳答案

您可以对加载掩码进行以下更改，然后移除卡的位置

position: relative;

请检查下面的链接

http://jsfiddle.net/wLnhh0uz/42/

希望对你有帮助！

关于html - 在具有负载掩码和固定宽度的溢出隐藏容器中截取下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45608969/