html - 如何在具有指定行高的CSS网格布局中隐藏列的溢出部分？

Question

我有以下 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;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

示例如下:https://codepen.io/anon/pen/xMMOBB

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

我怎样才能隐藏它们？我只想看到我的 CSS 网格的 50px。

Answer 1

Overflow 需要应用于元素溢出的容器，而不是元素本身，你不会有任何溢出，因为 min-content 并不意味着 从所有元素。此属性在处理宽度而不是高度时很有用，因为默认情况下高度是 auto 并且在大多数情况下已经适合最小内容。

您需要的是简单地为容器设置一个max-height 或height:

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

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

.container {
  display: grid;
  max-height:50px;
  overflow:hidden;
  grid-template-columns: 265px auto;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

或网格模板行

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

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

.container {
  display: grid;
  grid-template-rows:50px;
  overflow:hidden;
  grid-template-columns: 265px auto;
}

<div class="container">
  <div class="first"></div>
  <div class="second"></div>
</div>

更新

如果您不想为容器设置高度，您可以使第二列的内容不在流中，这样就不会增加容器的高度:

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

.second {
  position:relative;
}
.second > div {
  height: 100px;
  background-color: green;
  position:absolute;
  top:0;
  left:0;
  right:0;
}

.container {
  display: grid;
  overflow:hidden;
  grid-template-columns: 265px auto;
}

<div class="container">
  <div class="first"></div>
  <div class="second">
    <div></div>
  </div>
</div>