可能有可滚动的 div 与孩子能够溢出：可见？答案

【问题标题】：Possible to have scrollable div with children able to overflow: visible?可能有可滚动的 div 与孩子能够溢出：可见？
【发布时间】：2014-06-12 13:36:01
【问题描述】：

我正在为一个包含缩略图的网站制作一个可滚动的侧边菜单。我一直试图在悬停时让图像“溢出：可见”，因此在放大时图像不会被容器截断。

棘手的部分是，我希望保持垂直滚动的可能性（从而禁用溢出：可见）。任何建议/黑客如何解决这个问题？我还没有找到可行的解决方案:(

这是代码：http://codepen.io/anon/pen/lwaGv

【问题讨论】：

你的问题有点不清楚。为什么你需要禁用溢出：可见才能垂直滚动？
抱歉不清楚，让我试着澄清一下:) 为了能够在 div 中垂直滚动，我需要设置 overflow-y: auto/scroll 或 overflow: auto/scroll 但然后放大时图像被截断。

标签： css scroll overflow transform

【解决方案1】：

W3C 规范：

'overflow-x' 和 'overflow-y' 的计算值与其指定的值相同，除了某些与 'visible' 的组合是不可能的：如果一个被指定为 'visible' 而另一个是“滚动”或“自动”，然后“可见”设置为“自动”。如果‘overflow-y’相同，‘overflow’的计算值等于‘overflow-x’的计算值；否则它是“overflow-x”和“overflow-y”的计算值对。 :(

我也尝试了 z-index 和 important 规则，但都失败了。这是你需要的吗？

http://i.stack.imgur.com/9uYOC.png

编辑

也许你可以看看这个。我使用多个 div 制作它并固定了 div 的宽度，这样它们就不会在鼠标悬停时裁剪照片。您可以调整容器的高度。容器的背景可以设置为透明。

http://codepen.io/anon/pen/pIEih

PS：如果需要滚动条，则内部（可滚动）div 需要具有一定的宽度，以便在照片尺寸增加（悬停）时能够容纳照片。同样需要调整外部div的宽度。

codepen.io/anon/pen/fhyAa

【讨论】：