css - 溢出设置为可见最近开始调整父 div 的高度以适合 child

Question

我有一个子 div，它在将 overflow-y 设置为可见的父 div 内悬停时会增加其高度。从最近开始，父级 div 一直在调整/增加其高度以在子级高度增加时匹配子级 div 的高度，而不是简单地让子级 div 溢出并延伸到父级 div 之外。

父 div 也是 flexbox 列表的子元素，它具有固定的高度和固定的子元素数量。 flexbox 列表中的每个父 div 都旨在具有相同的高度，并且都包含一个具有不同高度的子 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 后溢出行为发生了变化。更多信息:Is anyone experiencing layout issues after upgrading to Chrome 72? 尽管如此，仍然会感谢允许 child 超越其 parent 的解决方案!提前致谢!

Answer 1

将父级的最小高度设置为 0px 解决了这个问题。