使用相同的高价值进行响应式网页设计

Question

嘿，我正在PWA（渐进式Web应用程序）工作。这不仅应适用于手机。笔记本电脑的屏幕也应该使用它。我正在使用网格布局。自己看看...效果很好。

但是，当我将其用于更高的屏幕宽度时，第二个框的信息文本将显示三行。我的代码如下所示：

.challenge_box {
  padding: 20px;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: repeat(2, auto);}
}

.challenge {
  position: relative;
  margin: 0 auto;
  height: auto;
  width: 90%;
}

.wrap_challenge {
  min-height: 400px;
  min-width: 90%;
  background-color: #fff;
  border-radius: 15px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrap_challenge h2 {
  padding: 20px;
  background-image: linear-gradient(to right, #141e30, #243b55);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.wrap_challenge label {
  padding: 0px 20px 20px 20px;
  text-align: center;
  color: #5f6368;
}

.wrap_challenge textarea {
  margin: 0px 20px 20px 20px;
  width: 80%;
  height: 220px;
  border-radius: 15px;
  outline: none;
  resize: none;
  padding: 7px;
}

<div class="challenge_box">
        <div class="challenge">
          <div class="wrap_challenge">
            <h2>LOGO CHALLENGE</h2>

            <label>Gebe die Antworten nach der Reihe an und setzte zwischen jede ein Komma.</label>
            <textarea id="challenge_logo" class="challenge_div_normal" cols="200" rows="20" placeholder="bsp.: Sony, Apple,.."></textarea>

            <input type="submit" value="Abschicken" onclick="sendAnswers('challenge_logo')">
          </div>
        </div>

        <div class="challenge" style="display:flex;justify-content:center;align-items:center;">
          <div class="wrap_challenge">
            <h2>MYSTERY CHALLENGE</h2>

            <label>Gebe die Antworten nach der Reihe an und setzte zwischen jede eine deutliche Trennung.</label>
            <textarea id="challenge_mystery" class="challenge_div_normal" cols="200" rows="20" placeholder="bsp.: Himbeerbaum || Affe auf Rollschuhen, lachend ||.."></textarea>

            <input type="submit" value="Abschicken" onclick="sendAnswers('challenge_mystery')">
          </div>
        </div>

        <div class="challenge" style="display:flex;justify-content:center;align-items:center;">
          <div class="wrap_challenge">
            <label class="in_work">IN ARBEIT...</label>
          </div>
        </div>
      </div>

如您所见，.challenge的高度设置为auto。这意味着盒子会适应内容。然后看起来像这样：

但是我想每次在两个盒子上都保持相同的高度，甚至适应内容吗？如何解决我的问题？
〜filip