如何在指定行高的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

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

UPDATE

如果您不想为容器设置高度，可以使第二列的内容超出流量，因此不会增加容器的高度：

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