居中模态框内容自适应拉伸的布局问题求助

各位大佬，我现在卡在上一个模态框布局的问题上，试了好几种方法都不行，之前问AI给的方案全踩坑，实在没办法来请教大家了！

我的需求是这样的：

• 做一个居中显示的模态对话框，窗口大小要完全跟着内部内容走
• 里面的输入区域我想设置成max-width:400px + width:100%，这样小屏幕上能自动收缩，大屏幕上保持合适的400px宽度
• 模态窗口本身的最大宽度我想设成500px，内容少的时候就自己自适应尺寸，不想把它强制设成全宽

现在的问题是：我用grid来实现.modal-bg的居中，但里面的.content设置width:100%完全不生效，模态窗口没法跟着内容拉伸，可我又不想给.modal-window设成全宽来解决，这到底咋搞啊？

我现在的代码是这样的：

当前CSS代码 #

.modal-bg {
  display: grid;
  place-items: center;
  min-width: 360px;
  background-color: black;
}

.modal-window {
  max-width: 500px;
  padding: 0.25rem;
  background-color: white;
}

.content {
  width: 100%;
}

当前HTML代码 #

<div class="modal-bg">
  <!-- 应该跟着内容拉伸 -->
  <div class="modal-window">
    <!-- 最大500px，没设width:100%时自适应内容尺寸 -->
    <div class="content">xxx</div>
  </div>
</div>

有没有大佬能帮我看看咋修改才能实现需求啊？麻烦啦！

内容来源于stack exchange