CSS 溢出-x 隐藏和溢出-y 可见

Question

我已阅读此 SO 帖子： css 溢出-x 可见和溢出-y 隐藏导致滚动条。

我也经历过： http ://www.brunildo.org/test/Overflowxy2.html

我想实现以下目标：

当我尝试使用以下代码时：

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

它显示类似于以下结果：

我不希望出现滚动条。

Jquery 有什么解决方案吗？

原文由 Prasad Jadhav 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以用这样的 CSS 来做到这一点：

HTML：

 <div class="wrapper">
    <div class="inner">
    </div>
</div>

CSS：

 .wrapper{
    width: 400px;
    height: 300px;
}
.inner{
    max-width: 100%;
    overflow-x: hidden;
}

现在您的 .wrapper div 将具有 overflow: visible; 但您的 .inner div 永远不会溢出，因为它的最大宽度为包装器的 100%。请注意，您的包装器必须具有明确定义的宽度。

这 是一个工作的jsFiddle

原文由 Bill 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不确定你是否需要这样的jQuery：

 $('.horiz').width($('.container').width());

其中 .horiz 是水平条，并将其宽度设置为 .container 的宽度，其中包含元素。

使用 CSS：

HTML 标记

<div class='container'>
    <div class='horiz'></div>
    <div class='vert'></div>
</div>

CSS：

  .container {
    width:320px;
    height:320px;
    border:solid 5px green;
    overflow-x: hidden;
 }
 .horiz{
    width:500px;
    height:30px;
    background:red;
 }
 .vert{
    width:30px;
    height:500px;
    background:yellow;
    position:absolute;
    left:0;
    top:30px;
 }

及其输出：

检查输出

原文由 Jai 发布，翻译遵循 CC BY-SA 4.0 许可协议