У меня есть дочерний элемент div, который увеличивает свою высоту при наведении курсора внутри родительского элемента div, для которого overflow-y установлено значение visible. Начиная с недавнего времени, родительский div изменяет / увеличивает его высоту, чтобы соответствовать высоте дочернего div, когда рост ребенка увеличивается, вместо того, чтобы просто позволять дочернему div переполняться и выходить за пределы родительского div.
Родительский div также является дочерним для списка flexbox, который имеет фиксированную высоту и фиксированное количество дочерних элементов. Каждый родительский div в списке flexbox должен иметь одинаковую высоту и содержать дочерний div с различной высотой.
.list {
display: flex;
flex-direction: column;
height: 100vh;
}
.parent {
height: 100%;
flex: 1 1 0%;
overflow-y: visible;
display: flex;
flex-direction: row;
}
.child {
height: 32px;
}
.child:hover {
height: 64px;
}
<div class='list'>
<div class='parent'>
<div class='child'> child </div>
</div>
<div class='parent'>
</div>
<div class='parent'>
</div>
</div>
https://jsfiddle.net/a57eofmx/3/
Как предотвратить изменение размера родительского элемента div для его дочернего элемента?
Обновление: только что на другом устройстве подтверждено, что поведение переполнения изменилось после обновления с Google Chrome v.72 до v.73. Подробнее здесь: У кого-нибудь возникают проблемы с компоновкой после обновления до Chrome 72?
Тем не менее, все равно был бы признателен за решение, позволяющее ребенку пройти дальше своего родителя! Заранее спасибо!