CSS溢出隐藏位置绝对

Question

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
}
.wrapper .first-column {
  background-color: #c2e0ff;
  position: absolute;
  width: 30%;
  overflow: hidden;
  height: 100vh;
}
.wrapper .first-column .box {
  width: 250px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: calc(50% - 25px);
  right: -150px;
}
.wrapper .second-column {
  position: absolute;
  background-color: #ffff00;
  width: 70%;
  right: 0;
  height: 100vh;
}

＆＃13;

<div class='wrapper'>
  <div class='first-column'>
    <div class='box'>
      content box
    </div>
  </div>
  <div class='second-column'>
    second-column
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我知道这个话题曾在几年前出现过，但让我重温一下这个话题。我需要找到一个解决方案，允许我显示div.box尽管溢出：隐藏。不幸的是，由于我使用滚动脚本，我只能更改框类。

https://jsfiddle.net/raptorr/Lf3b9yhz/