allowing absolute position html divs,nested in relative position div, to have scrollable overflow-y content and visible overflow-x content

Question

How would one go about using CSS properties to allow a div with nested divs, which have absolute position defined, to be able to scroll vertically once the defined position of those divs goes outside of their parent div AND be able to allow the horizontal overflow content remain visible?

This question arose from another question (making a scrollable div, inside of a td, with divs that have absolute positions defined) and seemed to warrant a new thread since this one and/or another related thread (CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue) do not seem to contain the answer.

Here is an almost working example, barring the fact that the horizontal overflow content doesn't remain visible even if you add overflow-x:visible into the innerstuffcols CSS section:

#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>

For educational purposes, I'm certainly open to any suggestions even if it means overhauling this example code a bit. Adding JS tag in case anyone has a workaround using JS though I prefer not to have that for multiple reasons.

Thank you in advance.