html - 我可以使用 flexbox css 将 4 个表格放在另一个表格之上，可调整大小，最大窗口高度吗？

Question

一直在尝试许多不同的配置，但从未获得完整的解决方案。目标 4 个表格，一个在另一个之上，每个表格的起始位置都不到浏览器高度的 1/4，每个表格都可以垂直调整大小，变大或变小。其他 3 个表随着调整后的表的操作而调整大小。

使用下面的代码，4 个表格将扩展(但超出浏览器 View 的末尾)，并且它们不会收缩。我知道“调整大小:垂直”不是 flexbox 的一部分，但没有我根本无法调整。

我已经将 flexbox 与行一起使用，并且能够水平扩展/收缩，所以假设(哈!)行->列的工作方式类似。

我可以用 flexbox 实现我的目标吗？

html:

<ul class="4tables">
 <li class="flexible CFS"><table id="table_CFS"></table></li>
 <li class="flexible MFS"><table id="table_MFS"></table></li>
 <li class="flexible SES"><table id="table_SES"></table></li>
 <li class="flexible SAAS"><table id="table_SAAS"></table></li>
</ul>

CSS:

ul.4tables {
  display: flex;
  flex-flow: column nowrap;
  max-height: 99vh;
}

li.flexible {
  flex: 1 1 auto;
  flex-basis: auto;
  height:21vh;
  resize: vertical;
  overflow: scroll;
}

谢谢。

Answer 1

对我来说，如果我尝试使用全尺寸，它就会起作用。问题是，vw 和 vh 始终与您的视口(viewport)(浏览器窗口)大小相关，因此如果代码不是全尺寸，您将无法使用它。
所以我会为 tables 元素使用 position: absolute。 (请记住为包装器使用 position: relative。

.tables-wrapper {
  position: relative;
  width: 400px;
  height: 600px;
  border: 1px solid #f0f
}
.tables {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flexible {
  flex: 1 1 auto;
  height: 25%;
  resize: vertical;
  overflow: scroll;
}

<div class="tables-wrapper">
  <div class="tables">
    <div class="flexible"></div>
    <div class="flexible"></div>
    <div class="flexible"></div>
    <div class="flexible"></div>
  </div>
</div>

如果您想要全屏显示，只需删除 tables-wrapper。

.tables {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flexible {
  flex: 1 1 auto;
  height: 25%;
  resize: vertical;
  overflow: scroll;
}

<div class="tables">
  <div class="flexible"></div>
  <div class="flexible"></div>
  <div class="flexible"></div>
  <div class="flexible"></div>
</div>