主页 / coding / 问题 / 79431632
Accepted
Marko
Asked: 2025-02-12 08:43:23 +0800 CST

防止子元素根据 flex-grow 增加父元素的高度[重复]

  • 772

我有一个定义高度的父元素（例如 100vh）和display: flex; flex-direction: column，以及几个没有固定高度的嵌套子元素 - 它们的高度基于flex-grow: 1。如果我添加一个新的最内层元素，其高度大于其父元素，则其所有祖先元素的高度都会改变。我希望新元素溢出其父元素，而不是改变其高度。

这是 jsfiddle 链接：https://jsfiddle.net/1o8khw7z/1/

使其工作的唯一方法是添加overflow: auto到顶部父级和新元素之间的所有元素（检查 jsfiddle 中的 CSS 注释）。

请记住我不能使用

如果嵌套元素很多，这个解决方案似乎有点麻烦。有没有更好的方法来处理这个问题？

html

1 个回答

  1. Best Answer

    您应该能够通过将固定高度嵌套子元素设置为具有来解决此问题position: absolute（这将导致它溢出其直接父级）。

    如果您遇到任何不想要的额外position: relative;溢出，请考虑将该直接父级设置为。这将阻止使测量结果width: 100%;更好地绑定到父级。

    更新了 jsfiddle！

    显著的变化：

    #grandchild {
  flex-grow: 1;
  border: 10px solid green;
  box-sizing: border-box;
  position: relative; /* new! */
}

#grandgrandchild {
  position: absolute; /* new! */
  height: 600px;
  border: 10px solid blue;
  box-sizing: border-box;
  width: 100%;
}
    • 2

相关问题