Высота родительских элементов увеличивается, если контент усечен

Question

Я действительно не могу воспроизвести свою проблему, поэтому просто отправлю ссылку на мой текущий сайт, где возникает проблема: here.

Я пытаюсь обрезать содержимое .event-description -div, если его содержимое больше, чем div. Поэтому класс .event-description определяется следующим образом:

.event-description { 
    height: 70%; 
    overflow: hidden; 
}

Но если содержимое больше начальной ширины и высоты (основано на разрешении браузера), контент действительно усечен, но все остальные родительские divs увеличивают их размер по высоте. Я использую bootstrap 3, а также некоторые библиотеки jquery, поэтому, возможно, проблема возникает оттуда.

Редактировать: This Снимок экрана показывает поведение по умолчанию и желанию, если содержимое правого div не переполнено. This Снимок экрана показывает нежелательное поведение. Содержимое действительно усечено, но по какой-то нечетной причине все остальные элементы увеличили их высоту, чего не должно было случиться.

Answer 1

Измените ваш .col-md-4 к

.col-md-4 { 
    max-height: 70%; 
    background-color: rgba(0,0,0,0.7); 
    color: rgb(255, 255, 255); 
    overflow: hidden; 
    padding-bottom: 20px; 
} 

И удалить правила вставленных себя, то есть такие:

.event-description { 
    height: 70%; 
    overflow: hidden; 
} 

Это может быть лучше применять правила, которые я добавил к event-wrapper классу, хотя, потому что вы можете не захотеть вмешиваться в CSS по умолчанию вашей фреймворка.