溢出：由叛逆的孩子像

Question

這是一個奇怪的一個隱含忽略：

.naReduced{ 
    max-height: 200px; 
    height:200px; 
    width: auto; 
    overflow:hidden; 
    border: blue 1px solid; 
} 
.naReduced>img{ 
    height: 250px; 
    width: auto; 
} 

正如你可以在這裏看到：http://syndex.me（第二後，仍然顯示爲電視AA婦女從杯子喝水的）溢出：隱藏被忽略。

如果您檢查元素，所有按CSS順序排列，但divs計算樣式仍設置爲250px而不是200px，爲什麼？

Answer 1

原因是你已經應用到父div的.noArt樣式。這被設置爲display: table-cell;，這會導致div伸展以包含內容（如表格單元格所示）。

如果您關閉該功能，則可以按需使用。

Answer 2

您需要將其顯示屬性更改爲block。目前是table-cell，與overflow:hidden衝突。像這樣的事情應該這樣做：

.naReduced{ 
    max-height: 200px; 
    height:200px; 
    display:block; 
    width: auto; 
    overflow:hidden; 
    border: blue 1px solid; 
}