Tabulator v5 maxHeight 100% 在弹性盒内使用时不起作用？答案

【问题标题】：Tabulator v5 maxHeight 100% not working when used inside flex box?Tabulator v5 maxHeight 100% 在弹性盒内使用时不起作用？
【发布时间】：2021-12-30 21:25:50
【问题描述】：

目标是在主布局中获得表格底部和页脚。（浅灰色）

你在这里找到谜题https://codepen.io/ironirc/pen/ExwQMLX

html结构：

<div style="height:300px;background-color:#555;padding:10px">
  <div class="col-layout">
    <div class="header">This is the header</div>
    <div class="table-wrapper">
      <div class="table" id="userTable">Table placeholder</div>
    </div>
    <div class="footer">This is the footer</div>
  </div>
</div>

css:

.col-layout {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: stretch;
  background-color: #999;
  box-sizing: border-box;
  height: 100%;
}
.header {
  background-color: #ff5c61;
}
.table-wrapper {
  background-color: black;
  padding: 10px;
  height: 100%;
}
.table {
  background-color: #4cd1a4;
}
.footer {
  background-color: #5ebeff;
}

Js省略（见代码笔）

移除表格包装器（黑色）可以解决问题，但在我的情况下，我需要它。

【问题讨论】：

标签： flexbox tabulator

【解决方案1】：

将height: 300px; 更改为height: auto;

（代码中的第一个 div）

<div style="height:auto;background-color:#555;padding:10px">

这里是代码

const data = [{
    email: "me@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "you@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "them@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "me@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "you@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "them@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "me@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "you@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "them@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "me@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "you@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "them@mail.com",
    verified: true,
    roles: ["super"],
    language: "en"
  }
];

(async function() {
  const mod = await
  import (
    "https://cdn.skypack.dev/pin/tabulator-tables@v5.0.7-vGtDkKjV9T1fmkgGx42u/mode=imports/optimized/tabulator-tables.js"
  );

  const userTable = new mod.TabulatorFull(
    document.getElementById("userTable"), {
      columns: [{
          title: "Email",
          field: "email",
          headerTooltip: "Account EMail"
        },
        {
          title: "Verified",
          field: "verified",
          formatter: "tickCross"
        },
        {
          title: "Language",
          field: "language"
        },
        {
          field: "roles",
          title: "Roles"
        }
      ],
      layout: "fitDataFill",
      maxHeight: "100%"
    }
  );

  userTable.on("tableBuilt", function() {
    userTable.setData(data);
  });
})();

.col-layout {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: stretch;
  background-color: #999;
  box-sizing: border-box;
  height: 100%;
}

.header {
  background-color: #ff5c61;
}

.table-wrapper {
  background-color: black;
  padding: 10px;
  height: 100%;
}

.table {
  background-color: #4cd1a4;
}

.footer {
  background-color: #5ebeff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>

<body>
  <div style="height:auto;background-color:#555;padding:10px">
    <div class="col-layout">
      <div class="header">This is the header</div>
      <div class="table-wrapper">
        <div class="table" id="userTable">Table placeholder</div>
      </div>
      <div class="footer">This is the footer</div>
    </div>
  </div>
</body>

</html>

【讨论】：

谢谢@Laaouatni。但是，通过您的解决方案，您将约束难题颠倒了。目的是使制表符的行为使其适合给定的高度。

【解决方案2】：

这是正确的，这是因为 flex 布局的工作方式，它们不会缩小到内容的最小尺寸以下，所以一旦表格被渲染，它就不允许它变小。

您应该absolutely 将包含 div 定位在 flexed div 中，top:0、left:0、height:100%、width:100%。然后把你的制表符粘在里面，它会允许弹性布局调整大小并适应表格

【讨论】：