如何使可滚动元素的溢出在固定宽度容器的边界之外仍然可见？

Question

我需要一个具有固定宽度的容器，以及一个可以在固定宽度内滚动的元素。问题是我需要超出固定宽度容器界限的内容是可见的。有人知道如何实现这一点吗？

我描述的情况的代码：https://Codepen.io/anon/pen/zyzojm

null

.outer {
  background: red;
  width: 400px;
  height: 800px;
}

.inner {
  background: blue;
  max-width: 200px;
  margin: auto;
  overflow-x: scroll;
  height: 300px;
  color: white;
}

.element {
  background: green;
  width: 800px;
  height: 100px;
}

<div class="outer">
  <div class="inner">
    <div class="element">Initially, this element should overflow all the way off the edge of the red (exactly how it does when overflow is set to visible). It should be scrollable, though (how it is when overflow is set to scroll) and when you scroll all the way to the right,
      the right of the green should end at the same place is does now (right edge of the blue).</div>
  </div>
</div>

null

我被难住了。这可能有一个简单的解决办法，但我一直把我的头发拔了一点。

Answer 1

这就是想要达到的目的吗？

.container1 {
  background: red;
  width:400px;
  height:800px;

}

.doop1 {
  background:blue;
  max-width: 200px;
  margin:auto;
  overflow: auto;
  height:300px;
  overflow-Y: hiddden;
}

.doop2 {
  background:green;
  width:800px;
  height:100px;
}

#overflow-text{
  display: block;
  width: 190px;
  position:fixed;
}


<div class="container1">
  <div class="doop1">
    <div class="doop2">
      <p id="overflow-text">
      Initially, this element should overflow all the way to the edge of the red. When you scroll all the way to the right, the green should end at the same place is does now (edge of the blue).
        </p>
    </div>
  </div>
</div>