当高度随着太多文本而增长时，网格列内部输入推动上 div

Posted 2023-03-07

【中文标题】当高度随着太多文本而增长时，网格列内部输入推动上 div

【英文标题】：grid column inner input pushing upper div when height grows with too much text

【发布时间】：2020-08-31 19:19:29

【问题描述】：

了解发生在我身上的最好方法就是观看视频：

video of content inside input pushes up div of messages - NOT WORKING

了解我希望它如何工作的最佳方式是观看此视频，该视频取自 discord.com 聊天社区

The way it should work

我正在使用 TailWindCSS，在最简单的示例中，我有一个类似于 3 列的网格，但是如果您单击并观看这两个视频，您就会明白发生了什么以及我想要什么。

<div class="grid grid-cols-3 gap-2 mx-2">
 <div>
   // lots of clients
 </div>
 <div>
   <div>lots of messages - this needs to scroll also</div>
   <input type="text"></input>
</div>
</div>

如果有人可以放置 codepen、沙箱、jsbin，任何东西都会有帮助！

【问题讨论】：

你能设置一个工作的 sn-p 来关闭，那个 div 正在向下而不是向上增长，一个简单的对齐属性应该可以解决它，但是我们需要更多上下文。

嗨@ZohirSalak，感谢您抽出宝贵时间查看我的问题，抱歉我无法发布有效的sn-p，我为此不知所措好几天，我试图放点东西，但是再次无法在 sn-p 上复制我的问题，非常感谢

【参考方案1】：

好吧，可悲的是，一个简单的overflow-hidden 导致了这个可怕的问题，老实说，我通过反复试验解决了它，因为我什至不擅长 CSS。