Question

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

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

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

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

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

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

您可以在下方更改加载掩码，然后删除卡的位置

position: relative;

请查看以下链接

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

希望这会对你有帮助！

在带有loadmask和固定宽度

1 个答案: