I have a child div that increases its height on hover inside a parent div that has overflow-y set to visible. Starting recently, the parent div has been adjusting/increasing its height to match the child div's height when the child's height increases, rather than simply allowing the child div to overflow and extend outside of the parent div.
The parent div is also a child of a flexbox list which has a fixed height and fixed number of children. Each parent div in the flexbox list are intended to have equal heights and all contain a child div with varying heights.
.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/ How do I prevent the parent div from resizing to its child?
Update: Just confirmed on a different device that the overflow behavior changed after updating from Google Chrome v.72 to v.73. More information here: Is anyone experiencing layout issues after upgrading to Chrome 72? Would still appreciate a solution for allowing the child to extend past its parent though! Thanks in advance!
