How to add scroll into react-bootstrap Modal.Body

Question

I'm using react-bootstrap modal.

How can I make only body to scroll and not all the page?

  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body>One fine body...</Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>

Answer 1

Thanks to Amit answer.

The first solution using only styles would be the following:

  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body style={{
      maxHeight: 'calc(100vh - 210px)',
      overflowY: 'auto'
     }}
    >
     One fine body...
    </Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>

There is a new way to implement that behavior using the react-bootstrap itself:

<Modal
  scrollable={true}
  ....
>
  ....
</Modal>

Modal Documentation

Answer 2

you can add scrollable to the Modal:

<Modal scrollable={true}>
</Modal>

You can get details from the Modal docs