小编Nic*_*ick的帖子

如何在指定行高的CSS网格布局中隐藏列的溢出部分?

我有以下 JS 和 HTML 代码:

.first {
  height: 50px;
  background-color: red;
}

.second {
  height: 100px;
  background-color: green;
}

.container {
  display: grid;
  grid-template-rows: min-content;
  grid-template-columns: 265px auto;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是示例: https: //codepen.io/anon/pen/xMMOBB

即使我添加overflow:hidden到第二个元素,我也可以看到第二个元素的溢出内容。为什么?

我怎样才能隐藏它们?我只想看到 50 像素的 CSS 网格。

html css

5
推荐指数
1
解决办法
6812
查看次数

标签 统计

css ×1

html ×1