溢出高度模态引导程序

Question

我有一个包含很多内容的Bootstrap modal，如下

然而，结果发现在模态底部，有多余的高度模态

我试过在模态上使用 max-height 属性，在模态主体上使用 overflow，但还没有找到任何结果。

这是代码：

const ModalsPreviewHTKP = ({ show, onHide, defaultValues }) => {
  const resData = defaultValues?.id;

  return (
        <Modal show={show}>
            <Modal.Header className='txt-blue-grey-700 text-bold header-md'>
                <span className='mx-auto'>PRATINJAU HTKP</span>
                <button type="button" class="btn-close m-0 p-0" aria-label="Close" onClick={onHide}></button>
            </Modal.Header>
            <Modal.Body>
              <div className='d-flex gap-2 mb-3 justify-content-center'>
                <img src={iconCard} alt="icon rumah sakit"/>
                <div style={{ lineHeight: '1.5em' }}>
                  <p>RS KASIH IBU BANDUNG</p>
                  <p>Jl. Cibolerang No. 23 Bandung 40225 <br/>
                    Telp: 022-8876-4532, Fax: (022)</p>
                </div>
              </div>

              <Table bordered>
                <tr>
                  <th>Nama Pasien</th>
                  <td>Udin Solehatun</td>
                </tr>
                <tr>
                  <th>Nama Dokter</th>
                  <td>Ahmad Pratama</td>
                </tr>
                <tr>
                  <th>Tanggal Resep</th>
                  <td>07-05-2021, 16:30 WIB</td>
                </tr>
                <tr>
                  <th>No. Resep Dokter</th>
                  <td>10/RI</td>
                </tr>
                <tr>
                  <th>Unit</th>
                  <td>Ruang Bersalin (VK)</td>
                </tr>
                <tr>
                  <th>Nasabah</th>
                  <td>Umum</td>
                </tr>
                <tr className='border-0'>
                  <td>
                    <div className='d-flex flex-column' style={{ lineHeight: 1.5 }}>
                      <span>Abbotic 125 Mg 30 Ml Syrup</span>
                      <span>1x1 Tab Sesudah Makan (Dihabiskan)</span>
                    </div>
                  </td>
                  <td>No. 1</td>
                </tr>
                  <tr>
                    <td colSpan={2}>
                      <Table style={{ border: '1px solid black', textAlign: 'center' }}>
                        <thead style={{ backgroundColor: '#ECEFF1', border: '1px solid black' }}>
                          <th style={{ width: '25%' }}>H</th>
                          <th style={{ width: '25%' }}>T</th>
                          <th style={{ width: '25%' }}>K</th>
                          <th style={{ width: '25%' }}>P</th>
                        </thead>
                        {/* <tbody>
                        
                        </tbody> */}
                      </Table>
                    </td>
                </tr>
              </Table>
              <ButtonSecondary variant="solid">CETAK RESEP <FaPrint color='white'/> </ButtonSecondary>
            </Modal.Body>
        </Modal>
  )
}

处理这个问题的最佳方法/解决方案是什么？

任何帮助将不胜感激，谢谢