html - 让滚动在子元素上而不是在可调整大小的父元素上

Question

我有一张大 table ，它位于两个粘性 div(页眉和页脚)之间的可调整大小的 float div 中。

但是，当这个表溢出时，滚动就会位于父 float div 上，而不是 div 本身，这会在我水平滚动时弄乱粘性 div。

示例:

当然，这可以通过将表格设置为固定宽度/高度来实现，但我需要它是自动的，因为它位于一个可调整大小的 div 中。

我怎样才能使这项工作？基本上我希望表格 div 有滚动条，而不是它的父元素，就像这个很棒的绘画编辑:

当然会保持自动调整大小。

页眉/页脚不应水平滚动。

这是 fiddle :https://jsfiddle.net/ppgab/nhy02w3v/18/

HTML :

<div class="floating-middle">
  <div class="sticky sticky-top">
    I'm a sticky header
  </div>
  <div class="table-wrapper">
    <table>
    <thead>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
    </thead>
    <tbody>
     ...
    </tbody>
    </table>
  </div>
  <div class="sticky sticky-bottom">
    I'm a sticky footer
  </div>
</div>

CSS:

body{
  display: flex;
  width : 100vw;
  height: 100vh;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.floating-middle{
  align-self : center;
  width : 200px;
  height : 200px;
  border: 1px solid black;
  resize: both;
  overflow: auto;
}
.sticky-top{
  position: sticky;
  top: 0;
  border-bottom: 1px solid black;
}
.sticky-bottom{
  position: sticky;
  bottom: 0;
  border-top: 1px solid black;
}
.sticky{
  background: red;
  color: white;
}
table{
  width: 100%;
  overflow: auto;
}

Answer 1

.table-wrapper { 溢出-x:滚动 }

https://jsfiddle.net/fpqamh45/

也许这就是你想要的？