overflow:hidden定义将隐藏该元素中超出其边界的任何内容。
根据您的具体应用，您可以使用如下结构：

.container {
  position: fixed;
  top: 30px;
  left: 50px;
  height: 30px;
  width: 300px;
  background: red;
}
.outer {
  overflow: hidden;
}
.inner {
  position: absolute;
}
.show-up {
  width: 100px;
  height: 300px;
  background: green;
  position: relative;
  margin-left: 20px;
}

<div class="container">
  <div class="outer">
    <div class="inner"></div>
  </div>
  <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>

View on JSFiddle

创建一个额外的外部div，并设置要移动到溢出隐藏div外部的div的绝对位置。

.container{
  position:relative;
}
.overflow-hid-div{
  overflow:hidden;
  margin-left:50px;
  width:200px;
  height: 200px;
  background-color:red;
}
.inner{
  width:50px;
  height: 50px;
  background-color:green;
  position: absolute;
  left:25px;
  top:25px;

}

<div class='container'>
    <div class='overflow-hid-div'>
        <div class='inner'>
            sup!
        </div>
    </div>
</div>

https://jsfiddle.net/JerryGoyal/ysgrevoh/1/

我挣扎了很久才得到一个提示。我的包含元素是overflow: hidden和add我不能添加额外的 Package 器divs，因为它会导致flexbox和ResizeObserver的一些奇怪的bug。据我所知，position: absolute元素没有办法转义 * both* overflow: hidden和position: relative的父元素。
但是我发现**position: fixed元素根本没有被overflow: hidden裁剪**，在我的例子中使用position: fixed实际上更容易。对某些人来说可能是个选择。

请查看我创建的以下fiddle：http://jsfiddle.net/NUNNf/12/
你应该像这样添加一个外部容器：

<div class="container">
    <div class="outer">
        <div class="inner">
            ...
        </div>
    </div>
    <div class="show-up">this needs to show up ALL 300 pixels high of it</div>
</div>

然后把里面的元素加进去。
造型：

.outer {
    position: absolute;
    top: 30px;
    left: 50px;
    overflow:hidden;
    height: 30px;
    width: 300px;
    background: red;
}

.container {
    position:relative;
}

.inner {
    position: relative;
}

.show-up{
    width: 100px;
    height: 300px;
    background: green;
    position: absolute;
    left: 20px;
    overflow: visible;
    top: 30px;
}