How to overflow-x: visible while overflow-y: scroll

Question

MDN, while talking about overflow, states:

MDN Note: Setting one axis to visible (the default) while setting the other to a different value results in vis

Answer 1

@oldboy Is that all right with you？

::-webkit-scrollbar {
  display: none;
}

#grid {
  width: 600px;
  height: 150px;
  background: black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px;
}

.column {
  box-sizing: border-box;
  border: solid red 3px;
  height: 100%;
}

.column:nth-child(1) {
  /*
  ** overflow: visible;
  **
  ** uncomment this to allow
  ** overflow on the x plane...
  */
}

.overflow {
  width: calc(100% - 30px);
  height: 75px;
  box-sizing: border-box;
  border: solid green 3px;
}

#square {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-100%, -50%);
  background: orange;
}
.wrap {
  width: calc(100% + 30px);
  position: relative;
  overflow-y: scroll; /* auto also does not work */
  overflow-x: visible;
  height: 100%;
}

<div id='grid'>
  <div class='column'>
    <div class="wrap">
      <div class='overflow'></div>
      <div class='overflow'></div>
      <div class='overflow'></div>
      <div id='square'></div>
    </div>
  </div>
  <div class='column'></div>
</div>