【问题标题】:Css grid content doesn't fit cell verticallyCss 网格内容垂直不适合单元格
【发布时间】:2018-11-01 21:32:25
【问题描述】:

所以我在使用 Css Grid 进行布局时遇到了一些问题。 这是我当前布局的 CodePen:

https://codepen.io/jbeaudoin11/pen/zMOGGd

我的目标是让glitch-card 具有动态高度/宽度并适合content 单元格。它在水平方向上就像一个魅力,滚动条出现在卡片container 中。但我无法让它垂直工作。

在我的 CodePen 中,您可以看到青色边框,它代表它应该适合的位置(应该停在窗口底部),但它不会并使 content 溢出窗口。

【问题讨论】:

  • 那个代码有点乱。你能制作出问题最小的钢笔吗?
  • 这几乎是最低限度:(
  • 除非你有所有这些额外的 div 和样式,它们不需要包含在问题公式中。删除不必要的元素,直到你不能,但仍然出现问题。
  • 那些不是额外的 div,这是问题的一部分。我真的不知道如何才能删除东西抱歉。
  • 即使只是将其简化为这个作品:codepen.io/anon/pen/NEKxrE

标签: html css css-grid


【解决方案1】:

我相信将这行添加到您的故障卡 css 中可以解决问题

display: inline-grid;
overflow: hidden;

检查 CodePen:https://codepen.io/remigioamc/pen/xQKZWq

【讨论】:

  • 像魅力一样工作!我已经调试了 6 个小时,谢谢!
猜你喜欢
  • 1970-01-01
  • 2018-07-09
  • 2021-08-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-22
  • 2014-04-16
  • 1970-01-01
相关资源
最近更新 更多