使用grid-auto-rows时如何使css网格增长为包含flexbox？

Question

在以下代码笔中，您将看到css网格内部有一个flexbox。如您所见，flexbox div的内容在网格的其他部分下溢出。

如果我删除CSS grid-auto-rows:100px;，则flexbox内容不再溢出。但是，我真的希望其他CSS网格项目的高度为100px，除非它们的内容太高而不能包含在100px之内。

如何使所有css网格项目的默认高度都设置为100px，同时又使任何内容大于100px的项目增长为容纳所有内容？

* {box-sizing: border-box;}

.wrapper { 
  display: grid; 
  grid-auto-rows: 100px; 
} 

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.box2 { 
  display:flex;
  flex-direction: column;
}

.box2 > div{
  border: 2px solid #ffa999;
  border-radius: 5px;
  background-color: #ffd899;
  padding: 1em;
  color: #d94899;
}

<div class="wrapper">
  <div class="box1">Box 1</div>
  <div class="box2">
    Box 2
    <div class="flex1">Flex One</div>
    <div class="flex2">Flex One</div>
    <div class="flex3">Flex One</div>
    <div class="flex4">Flex One</div>
  </div>
  <div class="box3">Box 3</div>
</div>

Answer 1

使用minmax(min, max)函数。

* {box-sizing: border-box;}

.wrapper { 
  display: grid; 
  grid-auto-rows: minmax(100px, auto); 
} 

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.box2 { 
  display:flex;
  flex-direction: column;
}

.box2 > div{
  border: 2px solid #ffa999;
  border-radius: 5px;
  background-color: #ffd899;
  padding: 1em;
  color: #d94899;
}

<div class="wrapper">
  <div class="box1">Box 1</div>
  <div class="box2">
    Box 2
    <div class="flex1">Flex One</div>
    <div class="flex2">Flex One</div>
    <div class="flex3">Flex One</div>
    <div class="flex4">Flex One</div>
  </div>
  <div class="box3">Box 3</div>
</div>