css - 如何溢出-x : visible while overflow-y: scroll

Question

MDN ，在谈论溢出时，指出:

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

所以在下面的上下文中...

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

...overflow-x: visible 表现为 overflow-x: auto，而后者似乎表现为 overflow-x: hidden。请注意，在下面的演示中，橙色方 block 的一半隐藏在 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-y: scroll 时使 overflow-x 真正可见？

这就是我想做的...

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>