html - "overflow-y: scroll;"隐藏水平线上溢出的元素

Question

我有一个 parent div，它包含一个绝对定位的 child div。

child div 位于parent div 的初始边界之外。渲染正常，没有任何问题。

我添加了一个 overflow-y: scroll; 到 parent div，现在 child 元素被隐藏了，尽管添加了 overflow-x: 可见;.

CSS

#parent{
     position: relative;
     overflow-y: scroll;
     overflow-x: visible;
}
#child{
     position: absolute;
     left: -50px;
}

还有一个 Fidle

Answer 1

我们在 stackoverflow 上找到了这个，但你不会开心。

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

简而言之，答案是这样的

If you are using visible for either overflow-x or overflow-y andsomething other than visible for the other. The visible value isinterpreted as auto.

他的回答更深入地讨论了解释这种情况的 W3 规范。

几乎你的 overflow-x 是不可见的，因为它会变成 auto。 (该样式的哪一部分隐藏了它的内容。)如果您的 overflow-y 与它有任何不同。

编辑:

不过，您可以尝试将此作为该规范的解决方法。

HTML

/*Necessary styles for example*/
#parent{
  display: inline-block;
  position: relative;
}
#absolute-child {
    position: absolute;
    left: -50px;
}
#child{
    overflow-y: scroll;
}

/*Below here is styles only for display purposes*/
body {
  display:flex;
  justify-content: center;
}

#absolute-child {
    background-color: red;
    color: white;
}

#child{
    border: solid 1px black;
    width: 200px;
    height: 200px;
    overflow-y: scroll;
}

#child {
    border: solid 1px black;
    width: 200px;
    height: 200px;
}

<div id=parent>
    <div id=absolute-child>
        This is the child
    </div>
    <div id=child>
        This is the child
    </div>
</div>

http://jsfiddle.net/BFLQr/

给我一​​点时间解释一下我做了什么。

编辑

所以首先我基本上必须将您的父 div 移动为现在存在的父 div 的子 div。这有点奇怪，但这是我唯一能想到的。现在的父 div 通过 display: inline-block 应用了“shrink to fit”样式，这将它包裹在它的子 div 周围。

由于 absolute 位置被推出文档流，这意味着您的 absolute 位置子元素不会影响其新的“收缩以适合”父元素的宽度或高度。 “缩小以适合”父级也有显示 relative 这让你的 absolute 位置 div 可以根据它定位。此外，由于父级现在显示 inline-block 以便将其居中，因此您必须在其包含元素上使用 text-align center。这意味着您还需要在#parent 或#child 元素上将文本 left 对齐。

希望这对您有所帮助。 :)

附言我编辑了 fiddle ，它在 #child 元素上有一个不必要的相对位置。我还向新父级添加了文本左对齐