允许垂直溢出，同时隐藏水平溢出

Question

我正在我的网站上工作，我有一个div容器与6个divs，分成两行3 div。

<div id="container"> 
<div class="item">Description image 1</div> 
<div class="item">Description image 2</div> 
<div class="item">Description image 3</div> 
<div class="item">Description image 4</div> 
<div class="item">Description image 5</div> 
<div class="item">Description image 6</div> 
</div> 

容器宽度设置为100％，溢出设置为隐藏。容器内的div宽度设置为33％，因此它填充（几乎）容器的整个宽度。

#container { 
width: 100%; 
overflow: hidden; 
} 

#container div { 
width: 33%; 
} 

当鼠标悬停在这6个div的之一，它是按比例的1.1倍，原来的大小，这是在那里我有我的问题。

.item { 
float: left; 
width: 100%; 
border: 1px solid; 
border-color: #575757; 
position: relative; 
opacity: 0.5; 

-o-transition: 0.2s ease-in-out; 
-ms-transition: 0.2s ease-in-out; 
-moz-transition: 0.2s ease-in-out; 
-webkit-transition: 0.2s ease-in-out; 
transition: 0.2s ease-in-out; 
} 

.item:hover { 
z-index: 10; 
opacity: 1; 

-o-transform: scale(1.1); 
-ms-transform: scale(1.1); 
-moz-transform: scale(1.1); 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
} 

当它超过其父，这是罚款，对于屏幕的左侧和右侧的一组大小，因为溢出，并隐藏它隐藏的内容，但我不希望这种情况发生的顶部和图像的底部。

有没有办法允许两行的顶部和底部溢出，同时保持溢出隐藏在两侧？

我创建this小提琴，或多或少显示我的问题（改变规模戏剧化效果：P）。

干杯！

Answer 1

您应该在#container上使用overflow-x: hidden;，它将水平隐藏内容，但如果您的内容垂直超出，将显示滚动条。

#container { 
    width: 100%; 
    overflow-x: hidden; 
} 

Demo