如何让React-Bootstrap Modal保持固定尺寸并滚动而非扩展？

要让Modal固定住2个ItemCard时的尺寸，仅让内容区域滚动，只需给Modal.Body设置固定最大高度并开启垂直滚动即可：

方法一：内联样式直接设置 #

修改你的Modal代码，给Modal.Body添加style属性：

<Modal size="lg" show={showInvModal} onHide={handleCloseInvModal}>
  <Modal.Header closeButton>
    <Modal.Title>Sell your items!</Modal.Title>
  </Modal.Header>
  {/* 给Body设置最大高度和滚动属性 */}
  <Modal.Body style={{ maxHeight: '400px', overflowY: 'auto' }}>
    <ItemCard
      title="The Last Egg of 2012"
      price="492"
      image="https://rest-bf.blox.land/render/76692407"
    />
    <ItemCard
      title="The Last Egg of 2012"
      price="492"
      image="https://rest-bf.blox.land/render/76692407"
    />
    <ItemCard
      title="The Last Egg of 2012"
      price="492"
      image="https://rest-bf.blox.land/render/76692407"
    />
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={handleCloseInvModal}>
      Close
    </Button>
    <Button variant="primary" onClick={handleCloseInvModal}>
      Save Changes
    </Button>
  </Modal.Footer>
</Modal>

方法二：自定义CSS类（推荐复用） #

如果需要在多个Modal中复用这个样式，可在CSS文件中定义类：

.fixed-modal-body {
  max-height: 400px; /* 可根据2个ItemCard的实际高度调整数值 */
  overflow-y: auto;
}

然后在组件中引用：

<Modal.Body className="fixed-modal-body">
  {/* ItemCard内容 */}
</Modal.Body>

说明 #

• maxHeight的数值可以根据你2个ItemCard时的Body高度调整，确保刚好适配原有尺寸；
• overflowY: 'auto'会在内容超过最大高度时自动显示滚动条，不超过时则隐藏；
• 不需要依赖Modal的scrollable属性（该属性会让整个Modal包括头部和底部一起滚动），我们只需要让Body区域独立滚动即可。

内容的提问来源于stack exchange，提问作者Tay Baye