Question

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

父div也是Flexbox列表的子代，它具有固定的高度和固定的子代数。 flexbox列表中的每个父div都应具有相同的高度，并且每个子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? 仍然会允许您允许孩子超越父母的解决方案！预先感谢！

Answer 1

将父级的最小高度设置为0px可以解决此问题。

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

1 个答案: