CSS网格不包装

Question

我读过很多文章说要使用grid-template-columns：repeat（auto-fit，minmax（200px，1fr））;包裹起来。我已经尝试过了，但仍然没有翘曲。我希望我的左列保持最大含量，而不要调整大小。我希望当列2中的内容变得太小时，将右列包装在列1下方。

这让我发疯。

.modal {
     padding: 20px;
     text-align: center;
     background-color: #9999;
}

.content {
     display: grid;
     justify-content: flex-start;
     grid-template-columns: minmax(max-content, auto) 1fr;
     align-items: flex-start;
     flex-wrap: wrap;
     max-width: 700px;
     margin: 0 auto;
     text-align: center;
     border: 1px solid white;
}

.message {
     text-align: left;
     border: 1px solid red;
}
 
.group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(60px, max-content));
     column-gap: 10px;
     row-gap: 10px;
     justify-content: center;
}
 
.link {
     background-color: green;
     display: block;
}

<div class="modal">
  <div class="content">

    <div class="message">
      <h3>Some content to fill up the message?</h3>
      <p>
        <span>
          <a href="bla">This is a dummy link?</a>
        </span>
      </p>
    </div>

    <div class="group">
      <div>
        <a href="...." class="link">
          <p>link</p>
        </a>
        <a href="...." class="link">
          <p>link</p>
        </a>
      </div>
    </div>

  </div>
</div>