Html Flexbox全母版'；具有可滚动内容的宽度和高度

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

我使用flexbox进行此布局，并为ul元素添加了

overflow-y:auto

，为table元素添加了

overflow:auto

。滚动条适用于ul元素，但不适用于table元素

关于如何让它在表元素中没有固定高度和宽度的情况下工作，因为它需要填充剩余的空间，有什么提示吗

以下是这方面的源代码：

---

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

很抱歉后来的解释：主体是网格父对象。它被设置为

100vw

和

100vh

，因此它将始终精确填充屏幕大小。页眉和页脚的行高为

min content

，而中间的内容的行高为

auto

，其预设高度为

100vh

，将使其跨越整个高度

宽度的计数相同。侧边栏的最小内容宽度为。因此，如果宽度改变，内容将适应它

注：由于default代码段预览的高度，您看不到表格。如果你把它扩展到一个正常的屏幕高度，它就会在那里


document.addEventListener（“DOMContentLoaded”，（）=>{
//附加li项
var ul=document.getElementsByTagName（“ul”）[0]；
for（设i=0；i<100；i++）{
var div=document.createElement（“li”）；
div.innerHTML=“测试”；
ul.儿童（分部）；
}
//追加tr项目
var tbody=document.getElementsByTagName（“tbody”）[0]；
for（让行=0；行<100；行++）{
让innerHTML=“”；
for（设col=0；col<50；col++）{
innerHTML+=“”+col+“”；
}
var div=document.createElement（“tr”）；
div.innerHTML=innerHTML；
t附体儿童（分部）；
}
});
body，
html{
保证金：0；
宽度：100vw；
高度：100vh；
显示：网格；
网格模板列：最小内容自动；
网格模板行：最小内容自动最小内容；
网格柱间距：0；
}
#头衔，
#页脚{
格构柱：跨度2；
}
h1，
h3{
保证金：0；
}
#头衔，
#导航，
#文章,，
#页脚{
填充：1rem；
}
#头衔，
#页脚{
背景：浅灰色；
}
#导航{
溢出y：滚动；
}
#文章{
显示：网格；
网格模板列：1fr；
网格模板行：最小内容自动；
溢出y：隐藏；
}
#桌子{
宽度：100%；
溢出：滚动；
}
文本区{
宽度：100%；
调整大小：垂直；
}
/*桌子*/
tr{
边框：1px实心浅灰色；
}
运输署{
边框：1px实心浅灰色；
填充物：5px；
宽度：100px；
}

我的应用程序
边栏

试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

这里有东西
版权所有（c）1017从来没有人
在您的表中应用display:flex，然后再试一次。@VimalPatel它不起作用检查一下，对我来说，它更像是一个css网格任务。您是否尝试过使用
minwidth:100%；最大宽度：计算（100vw-“侧边栏宽度”）还没有？@tacoshy我忘了提到侧边栏宽度可以调整大小，我希望避免这种计算以保持所有元素的同步。