【问题标题】:grid column inner input pushing upper div when height grows with too much text当高度随着太多文本而增长时,网格列内部输入推动上 div
【发布时间】: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 上复制我的问题,非常感谢

标签: css flexbox grid tailwind-css


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2016-02-13
    • 2012-02-14
    • 1970-01-01
    • 2019-01-15
    • 2016-09-15
    • 1970-01-01
    • 1970-01-01
    • 2021-12-30
    • 2016-02-13
    相关资源
    最近更新 更多