html - 隐藏 overflow-x 时 overflow-y 不工作？

Question

我有一个包含其他几个 div 的 DIV。我需要 div 能够垂直而非水平地从父对象中窥视。

我认为使用 overflow-x 和 overflow-y 可以解决这个小问题，但我只能显示 x 和 y，或者同时显示它们隐藏。

我的 CSS 和 HTML:

.game {
  position:absolute;
  width:400px; height:300px;
  top:100px; left:100px;
  background-color:#cccccc;

  overflow-x:hidden;
  overflow-y:visible;
}

.block1 {
  position:absolute;
  width:100px; height:100px;
  top:-50px; left:150px;
  background-color:#ffcccc;
}

.block2 {
  position:absolute;
  width:100px; height:100px;
  top:150px; left:-50px;
  background-color:#ccffcc;
}

<div class="game">
  <div class="block1"></div>
  <div class="block2"></div>
</div>

See this JSFiddle:两个子 div 都被切断，即使 overflow-y 设置为可见。

Answer 1

需要结构性改变

如果它以其他方式工作，这会得到你想要的(我不知道 html/css 的变化是否会影响你游戏的其他方面)。它通过对“游戏”进行分层来解决它，使其垂直方向充满整个屏幕，然后您的“窗口”(灰色区域)由子 div 设置。这允许 overflow: hidden 水平放置，但不能垂直放置。

See fiddle.

HTML

<div class="game">
    <div>
    <div class="block1"></div>
    <div class="block2"></div>
    </div>
</div>

CSS

html, body { height: 100%; margin: 0;}
.game {
    position:absolute;
    width:400px; 
    height:100%;
    top: 0; 
    left:100px;
    overflow:hidden;
}
.game > div {
    position: absolute;
    top: 100px;
    height: 300px;
    width: 100%;
    background-color:#cccccc;
}

.block1 {
    position:absolute;
    width:100px; height:100px;
    top:-50px; left:150px;
    background-color:#ffcccc;
}

.block2 {
    position:absolute;
    width:100px; height:100px;
    top:150px; left:-50px;
    background-color:#ccffcc;
}