Переполнение: скрыто игнорируется непослушным детским образом

Question

Это странно:

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

Как вы можете видеть здесь: http://syndex.me (второй пост, который выглядит как телевизор, на котором все еще изображена женщина, пьющая из стакана) переполнен: скрытый игнорируется.

Если вы проверяете элемент, все в порядке с точки зрения CSS, но вычисляемый стиль divs по-прежнему установлен на 250px вместо 200px, почему это так?

Answer 1

Вам необходимо изменить его свойство отображения на block. В настоящее время это table-cell, что противоречит overflow:hidden. Примерно так должно поступить:

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

Answer 2

Причина в том, что вы применили стиль .noArt к родительскому элементу div.Это стиль display: table-cell;, который заставляет div растягивать содержимое (как это делают ячейки таблицы).

Если вы отключите это, он будет работать так, как вы хотите.