下拉菜单在具有负载掩码和固定宽度的溢出隐藏容器中被切断

Question

一个固定宽度的容器，带有垂直滚动条（如果项目多于视口中） - 这意味着浏览器将 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>

Answer 1

您可以对 loadmask 进行以下更改，然后删除卡片的位置

position: relative;

请查看以下链接

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

希望对您有所帮助！