CSS/Tailwind 让 flex-grow 孩子在溢出时滚动

Posted 2023-03-07

【中文标题】CSS/Tailwind 让 flex-grow 孩子在溢出时滚动

【英文标题】：CSS/Tailwind Getting flex-grow child to scroll on overflow

【发布时间】：2021-08-12 07:14:30

【问题描述】：

我无法让 div 中的内容在溢出时滚动。我大部分时间都在玩它，但还没有真正到任何地方！我正在使用 Tailwind 进行布局。在我开始尝试之前，这里有一个 Tailwind 游乐场的链接，展示了我的问题：https://play.tailwindcss.com/S4U9ewEu98。我已经制作了几个 cmets，我在幕后使用 React，所以这只是 Chrome 的粘贴输出，这就是为什么在带有 rsw 类名称的 div 上设置一些样式的原因。

我看过这里：CSS - flex grow height and enable overflow，实际上，如果我在第 45 行的 div.tw-overflow-scroll 上设置手动高度，例如添加 tw-h-80 类，那么它会滚动并且只占用该高度（相当于height: 20rem;)。但是，我希望它完全填满任何剩余空间。如果我用tw-h-full 替换它，这相当于添加height: 100%; 所以它似乎有百分比高度的问题。我已经在操场上指出要注释掉哪些行以查看布局应该是什么样子。在没有溢出内容的情况下可以正常工作！

我还在这里阅读了其他文章，将min-height: 0px 添加到包含溢出容器的 flex 子项可以修复它。唉，好像没有。我整天都在扯头发，因为这肯定比我发现的容易吗？如果有人能提供一些帮助，我将不胜感激！

【参考方案1】：

给你https://play.tailwindcss.com/IUMn8ZCpvh

您错过了几个tw-h-full 和一个tw-min-h-0。

【讨论】：

谢谢。然而，尽管它使列表可滚动，但列表中的最后一项仍被切断底部，下面的按钮也是如此。这里有一个更好的说明它应该是什么样子，但我没有为完整的高度列表，而是为可滚动容器添加了一个手动高度：play.tailwindcss.com/uBJgz33rI0