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

Question

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

我为此布局使用了 flexbox，并且我为 ul 元素添加了 overflow-y: auto，为 table 元素添加了 overflow: auto。滚动条适用于 ul 元素，但不适用于 table 元素。

关于如何在 table 元素中没有固定高度和宽度的情况下工作的任何提示，因为它需要填充 space 剩下的任何内容？

这是源代码：

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

Answer 1

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

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

PS：由于默认的片段预览高度，您看不到 table。如果你把它扩展到正常的屏幕高度，它就会在那里。

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>

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

Flexbox full parent's width and height with scrollable content

html

css

scroll

flexbox