如何在指定行高的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到第二个元素，我也可以看到第二个元素的溢出内容。为什么？

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

Answer 1

溢出需要应用于元素溢出的容器，而不是元素本身，并且不会有任何溢出，因为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>

或者grid-template-rows

.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>