javascript - 如何在具有固定页眉和页脚的 HTML 布局中使用水平滚动条显示完整内容？

Question

我的 HTML 布局具有固定的页眉和页脚。中间容器由左 Pane (也是固定位置)和右 Pane 组成。右侧 Pane 是内容显示区域，它应该能够根据屏幕大小显示垂直和水平滚动条。

这是我的测试 fiddle :https://jsfiddle.net/mo0rjye3/2/

当我调整屏幕的宽度时，表格向左移动，一些部分从 View 中隐藏。

期望:表格应该完全显示，带有水平滚动条，同时它应该在右 Pane 的分配空间中居中(宽度将根据最宽的内容动态计算)。例如，右 Pane 的宽度可以是1200px，内容应该在里面居中对齐。

如果我不在 div-centered 类中使用 display:flex，表格会按预期显示。

Answer 1

移除主栏和侧边栏左侧的位置。将 display:flex 添加到容器中。将表格中的 div 显示为 block 。添加一些bootstrap col类到container、main和sidebar来获得样式。请引用 fiddle 。

#sidebar-left{  
  margin-top: 30px;
  min-width: 230px;
  height: 87vh !important;
  min-height: 50vh !important;
  background-color: coral;
  overflow: auto;
  overflow-x: hidden;
  z-index: 1;
}

#main{
    background-color: lightgray;  
    overflow-x: auto;
    max-height: 87vh !important;
    min-height: 87vh !important;
    min-width: 300px;
    height: 87vh !important;  
}

#container{
  display: flex;
}

https://jsfiddle.net/bL3h1gvu/