具有可滚动内容的 Flexbox 完整父级的宽度和高度

Question

我有一个布局，它不应该溢出浏览器窗口，但是有 2 个组件（ul 和 table）可以大于窗口的大小，所以它们应该是可滚动的。

我在这个布局中使用了 flexbox，我为 ul 元素添加了overflow-y: auto，为表格元素添加了overflow: auto。滚动条适用于 ul 元素，但不适用于 table 元素。

关于如何让它在没有固定高度和宽度的表格元素中工作的任何提示，因为它需要填充剩余的空间？

这里是源代码：

编辑 1：我忘了提到侧边栏的宽度可以调整大小，我希望避免这种计算以保持所有元素同步。稍后将移植此代码以做出反应，并且在用户调整侧边栏宽度大小时重新渲染应用程序可能会导致我想象的糟糕性能。所以，如果可能的话，我们的目标是在 CSS 中处理这一切。

Answer 1

对不起，解释晚了：body 是网格父级。它设置为100vw 和100vh，所以它总是会完全填满屏幕大小。页眉和页脚的行高为min-content，而其间的内容的高度为auto，预设高度为100vh，将使其跨越整个高度。

width 的计数相同。侧边栏的宽度为 min-content。所以如果宽度发生变化，内容就会适应它。

PS：由于默认的 sn-p 预览高度，您看不到表格。如果你将它扩展到正常的屏幕高度，它就会在那里。

document.addEventListener("DOMContentLoaded", () => {
  // append li items
  var ul = document.getElementsByTagName("ul")[0];
  for (let i = 0; i < 100; i++) {
    var div = document.createElement("li");
    div.innerHTML = "Test";
    ul.appendChild(div);
  }
  
  // append tr items
  var tbody = document.getElementsByTagName("tbody")[0];
  for (let row = 0; row < 100; row++) {
    let innerHTML = "";
    for (let col = 0; col < 50; col++) {
      innerHTML += "<td>" + col + "</td>";
    }
    var div = document.createElement("tr");
    div.innerHTML = innerHTML;
    tbody.appendChild(div);
  }
});

body,
html {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto min-content;
  grid-column-gap: 0;
}

#title,
#footer {
  grid-column: span 2;
}

h1,
h3 {
  margin: 0;
}

#title,
#nav,
#article,
#footer {
  padding: 1rem;
}

#title,
#footer {
  background: lightgray;
}

#nav {
  overflow-y: scroll;
}

#article {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto;
  overflow-y: hidden;
}

#table {
  width: 100%;
  overflow: scroll;
}

textarea {
  width: 100%;
  resize: vertical;
}

/* table */

tr {
  border: 1px solid lightgray;
}

td {
  border: 1px solid lightgray;
  padding: 5px;
  width: 100px;
}

<div id="title">
  <h1>My<strong>Application</strong></h1>
</div>
<div id="nav">
  <h3>Sidebar</h3>
  <ul>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
    <li>Test</li>
  </ul>
</div>
<div id="article">
  <textarea>
    Something here
  </textarea>
  <div id="table">
    <table>
      <tbody></tbody>
    </table>
  </div>
</div>
<div id="footer">
  Copyright (c) 1017 Nobody Ever
</div>