子项增长容器而不是溢出答案

【问题标题】：Child items grow the container instead of overflow子项增长容器而不是溢出
【发布时间】：2021-01-26 00:31:31
【问题描述】：

伙计们。在网页设计方面，我完全是个菜鸟。我知道我有点过度使用flex。但！！和他们在一起很容易。

无论如何，我的问题是我的一个组件（使用 TailwindCSS 和 React）是一个无限加载列表，但问题是列表中的元素正在增长容器，即使它有 overflow: auto。我一直在撕裂我的头。

我已将容器的背景设置为深色，以便更快地理解问题。如果您想查看代码本身，请查看https://pastebin.com/Vhuxii6j

我真的不知道还能做什么。我试图将flex-shrink 放在容器中，这样它就不会增长，但它什么也没做。我试过把子元素设置为inline-flex，什么都没有。

提前致谢:)

【问题讨论】：

【解决方案1】：

找出问题所在这是您需要做的，在滚动列表中您需要将 overflow-auto 更改为 overflow-y-scroll 并添加 max-h-# 其中 # 是顺风中的任何预设数字这里是我提到的文档的 link

我已将link 附加到我设置max-h-80 的输出解决方案中这表明问题在于自动高度继承。您可能需要重新定义基本布局

注意 - 您可能必须更改 codepen.io 链接上的视图并将结果放在底部以防万一，如果它没有在该布局中打开它。

【讨论】：

【解决方案2】：

经过一夜好眠和一天的工作。我设法用 TailwindCSS 的两个简单类 flex-1 和 min-h-0 修复它。这已添加到列表的父级

感谢@Nishant Sham Vispute 的尝试 :) 也许您将来可以使用它。

【讨论】：