如何溢出-x：可见，而溢出-y：滚动

Question

MDN在谈论溢出时指出：

  

MDN注意：将一个轴设置为可见（默认），而将另一个轴设置为其他值会导致可见行为为自动。

所以在以下情况下...

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

... overflow-x: visible的行为类似于overflow-x: auto，而这反过来又表现为overflow-x: hidden。请注意，在下面的演示中，橙色正方形的一半隐藏在Z平面上。

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

如何在使用overflow-x时使visible真正成为overflow-y: scroll？

这就是我想做的...

Answer 1

@oldboy可以吗？

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