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

问题

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 visible behaving as auto.

So in the following context...

overflow-y: scroll/auto
overflow-x: visible

...overflow-x: visible behaves as overflow-x: auto, which in turn seems to behave as overflow-x: hidden. Notice in the demo below that half of the orange square is hidden on the Z plane.

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

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

.column {
  position: relative;
  box-sizing: border-box;
  border: solid red 3px;
}

.column:nth-child(1) {
  overflow-y: scroll; /* auto also does not work */
  overflow-x: visible;
  /*
  ** overflow: visible;
  **
  ** uncomment this to allow
  ** overflow on the x plane...
  */
}

.overflow {
  height: 75px;
  box-sizing: border-box;
  border: solid green 3px;
}

#square {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  background: orange;
}

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

How can I make overflow-x truly visible while using overflow-y: scroll?

This is what I would like to do...

回答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>

来源：https://stackoverflow.com/questions/59538547/how-to-overflow-x-visible-while-overflow-y-scroll