允许绝对位置html div（嵌套在相对位置div中）具有可滚动的溢出Y内容和可见的溢出X内容

Question

如何使用CSS属性允许具有已定义绝对位置的嵌套div的div一旦这些div的定义位置超出其父div并能够允许垂直滚动，水平溢出内容仍然可见？

这个问题源于另一个问题（making a scrollable div, inside of a td, with divs that have absolute positions defined），似乎有必要提出新的话题，因为这个和/或另一个相关的话题（CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue）似乎没有答案。

这是一个几乎可以正常工作的示例，除非即使在innerstuffcols CSS部分中添加了overflow-x：visible，水平溢出内容仍然不可见：

#mainHeader {
  background-color: #999999;
  color: #ffffff;
  position: absolute;
  width: 100%;
  height: 5%;
  left: 0;
  top: 0;
}

#mainPlace {
  position: absolute;
  width: 100%;
  height: 95%;
  left: 0;
  top: 5%;
  overflow: hidden;
}

#mainTable {
  position: absolute;
  left: 0;
  height: 100%;
  width: 85%;
  overflow: hidden;
}

#mainMenu {
  position: absolute;
  left: 85%;
  right: 0;
  height: 100%;
}

#tablebody {
  height: 100%;
  width: 100%;
}

th.tableheaders {
  border: 1px solid black;
  height: 5%
}

td.someCols {
  border: 1px solid black;
}

table,
th,
td {
  border-collapse: collapse;
}

.innerstuffCols {
  position: relative;
  overflow-y: scroll;
  width: 100%; 
  height: 100%;
}

div.stuffbox {
  height: 200px;
  position: absolute;
  width: 200px;
  left: 5px;
  text-align: center;
  background-color: #f1f1f1;
}

<div id="mainHeader">
  <p align="center"> random header here </p>
</div>

<div id="mainPlace">
  <div id="mainTable">
    <table style='width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;border:1px solid black'>
      <tr id='tableheader'>
        <th class='tableheaders'>header 1</th>
        <th class='tableheaders'>header 2</th>
      </tr>

      <tr id='tablebody'>
        <td class='someCols'>
          <div class='innerstuffCols'>
            <div class='stuffbox' style='top:55px;'> stuff 1 </div>
            <div class='stuffbox' style='top:265px;'> stuff 2 </div>
            <div class='stuffbox' style='top:475px;'> stuff 3 </div>
            <div class='stuffbox' style='top:685px;'> stuff 4 </div>
            <div class='stuffbox' style='top:895px;'> stuff 5 </div>
            <div class='stuffbox' style='top:1105px;'> stuff 6 </div>
          </div>
        </td>
        <td class='someCols'>
          <div class='innerstuffCols'>
            some other stuff
          </div>
        </td>
      </tr>

    </table>

  </div>
  <div id="mainMenu">
    <p> some stuff here </p>
  </div>
</div>

出于教育目的，我当然愿意接受任何建议，即使这意味着需要彻底修改此示例代码。添加JS标签，以防万一有人使用JS解决方法，尽管出于多种原因，我不希望这样做。

谢谢。