允許垂直溢出，同時隱藏水平溢出

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