"overflow-y:滚动；"在水平线上隐藏了溢出的元素 [英] "overflow-y: scroll;" is hiding overflowing elements on the horizontal line

问题描述

我有一个 parent div，其中包含一个绝对定位的 child div.

I have a parent div that contains an absolute positioned child div.

child div位于 parent div的初始边界之外.它正常呈现，没有任何问题.

The child div is positioned outside the initial boundaries of parent div. It was rendering normally without any problems.

我在 parent div中添加了 overflow-y:scroll; ，现在，尽管添加了溢出-x:可见； .

I added an overflow-y: scroll; to the parent div, and now the child element is hidden despite adding overflow-x: visible;.

CSS

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

还有一个修复

推荐答案

在stackoverflow上发现了这一点，但是您不会感到高兴.

Well found this on stackoverflow, but you aren't going to be happy.

CSS溢出-x:可见的;和溢出-y:隐藏；导致滚动条问题

简而言之，答案就是这样

To put it short the answer says this

如果您对 overflow-x 或 overflow-y 使用 visible ，并且除了 visible 以外的其他内容. visible 的值为解释为 auto .

If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.

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

His answer goes more in depth talking about the W3 spec which explains this occurrence.

您的 overflow-x 几乎不可见，因为它将变为 auto .(如果您的 overflow-y 与它有什么不同，则该样式的哪一部分将隐藏其中的内容.)

Pretty much your overflow-x can't be visible because it will turn to auto. (which part of that style hides the content that goes out of it.) if your overflow-y is anything different from it.

不过，您可以尝试使用此方法作为该规范的解决方法.

You could try this however as a workaround for that spec.

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/

请稍等一下以解释我所做的事情.

Give me a second to explain what I did.

编辑

因此，首先我基本上必须将您的父div移到现在所在的父div的子div中.这有点奇怪，但这是我唯一能想到的.现在的父div具有"缩小以适合";通过 display:inline-block 应用于它的样式，它将其围绕其子div.

So first of all I basically had to move your parent div to be a child div of the parent div that is now there. This is a little strange, but it's the only thing I could think of. The now parent div has the "shrink to fit" style applied to it through display: inline-block this wraps it around it's child divs.

由于位置 absolute 从文档流中推出，这意味着您的 absolute 位置子级不会影响其新的缩小以适合"的宽度或高度.父母收缩以适合"是指收缩以适合".父级还具有显示 relative 的内容，这使您根据其定位 absolute 的绝对位置div.另外，由于父级现在显示为 inline-block 以便居中，因此必须在其包含元素上使用文本对齐的 center .这意味着您还需要在#parent或#child元素上将文本左对齐 left .

Since position absolute gets pushed out of the document flow this means your absolute position child does not affect the width or height of it's new "shrink to fit" parent. The "shrink to fit" parent also has display relative this let's your absolute position div be positioned according to it. Also since the parent is now display inline-block in order to center it you must use text-align center on it's containing element. which means you also need to put text align left on your #parent or #child elements.

希望这会有所帮助.:)

Hope this helped. :)

P.S.我编辑了小提琴，它在#child元素上的位置相对不必要.我还向新的父级添加了文本左对齐

P.S. I edited the fiddle it had an unnecessary position relative on the #child element. I also added the text-align left to the new parent

这篇关于"overflow-y:滚动；"在水平线上隐藏了溢出的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！