Как заставить CSS-сетку расти, чтобы она содержала flexbox при использовании grid-auto-row?

Question

В следующем коде вы увидите, что внутри сетки CSS есть flexbox. Как видите, содержимое элемента flexbox переполняется другими частями сетки.

Если я удаляю CSS grid-auto-rows:100px;, содержимое flexbox больше не переполняется. Однако я действительно хочу, чтобы другие элементы сетки CSS имели высоту 100 пикселей, если только их содержимое не слишком высокое, чтобы помещаться в пределах 100 пикселей.

Как сделать так, чтобы все элементы сетки 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>