我无法使嵌套的 flex-grow 元素按预期工作

Question

代码笔：https://codepen.io/andrerpena/pen/JjBzKNg

当屏幕挤压时，我希望按钮栏在蓝色--> 指向的位置始终可见。

我的文档结构是这样的：

• div[@id='title']
• div[@id='body'] <-- 这应该增长
  • div[@id='body-content'] <-- 这应该增长并且可以滚动
  • div[@id='body-buttons'] <-- 这应该固定在底部

根据上述结构，我希望body-content 滚动并且body-buttons 始终可见。

为什么不是呢？有没有办法在不改变DOM结构的情况下修复它？如果不是，你会如何改变它？

我个人很想知道为什么它不起作用，因为我做 CSS 已经十多年了，但我仍然对这样的事情感到惊讶。

谢谢。

Answer 1

Flex child 有一个初始值min-height: auto，这意味着它的高度不会小于内容高度（文本）。在这种情况下，您可以将 min-h-0 类添加到 div[@id='body'] (#body) 元素，这样它就不必具有最小高度。这是working codepen。