Question

我有简单的CSS网格。我希望它可以拉伸孩子以填充可用的内容，但是如果孩子中的任何一个有height: 0，也要尊重它。现在，它还为height: 0的孩子“保留”了空间。这是显示我的问题的小提琴： https://jsfiddle.net/f3r0b5e9/7/

.wrapper {
  height: 300px;
  width: 200px;
  border: 1px solid red;
  display: grid;
  align-content: stretch;
  grid-template-rows: auto;
}

.child {
  width: 100%;
  border: 1px solid blue;
  background: #cad5e8;
}

.child.one {
  height: 0;
  min-height: 0;
  max-height: 0;
}

<div class="wrapper">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>

这是我要完成的工作： http://prntscr.com/kqcry4

注意：我知道如何使用flexbox：）

谢谢！

Answer 1

使用auto或min-content代替max-content作为grid-template-rows的值：

.wrapper {
  height: 300px;
  width: 200px;
  border: 1px solid red;
  display: grid;
  align-content: stretch;
  grid-template-rows: min-content;
}

.child {
  width: 100%;
  border: 1px solid blue;
  background: #cad5e8;
}

.child.one {
  height: 0;
  min-height: 0;
  max-height: 0;
}

<div class="wrapper">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>

如何使CSS网格拉伸孩子并尊重最小身高：0？

1 个答案: