react-codemirror2でスクロールバーが表示されず、スクロールされない

実現したいこと

react-codemirror2を使って大量の文字を入力してもCodeMirrorのエディターの中でスクロールしたい

発生している問題

スクロールバーが表示されず、スクロールされない

関連するソースコード

Javascript
1//index.js
2import ReactDOM from 'react-dom';
3import App from './App.js';
4import './style.scss';
5import 'codemirror/theme/material.css';
6import 'codemirror/lib/codemirror.css';
7import 'codemirror/addon/scroll/simplescrollbars.css';
8
9
10ReactDOM.render(
11    <App />,
12    document.querySelector('#app')
13);

JavaScript
1//App.js
2import React from 'react';
3import Core from './components/core';
4import MyHeader from './components/header';
5export default class App extends React.Component {
6    render(){
7        return (<div id="body"><MyHeader /><Core /></div>);
8    }
9}

JavaScript
1//header.js
2import React from 'react';
3
4export default class MyHeader extends React.Component {
5    render(){
6        return (
7        <header>
8            <h1>MarkDown Editor</h1>
9        </header>);
10    }
11}

JavaScript
1//core.js
2import React from 'react';
3import {Controlled as CodeMirror} from 'react-codemirror2';
4import 'codemirror/mode/markdown/markdown';
5import 'codemirror/mode/gfm/gfm';
6import 'codemirror/addon/display/placeholder';
7import 'codemirror/addon/scroll/simplescrollbars';
8
9const options = {
10    mode: 'gfm',
11    theme:'material',
12    lineNumbers:true,
13    placeholder: 'Write Markdown here',
14    lineWrapping: true,
15    scrollbarstyle:'simple'
16};
17
18export default class Core extends React.Component {
19    constructor(props){
20        super(props);
21        this.state = {
22            cmvalue:''
23        };
24    }
25    render(){
26        return (
27        <div id="core">
28            <CodeMirror options={options}
29            value={this.state.cmvalue}
30            onBeforeChange={(editor, data, cmvalue)=>{
31                this.setState({cmvalue});
32            }}
33            onChange={(editor,data,value)=>{}} />
34        </div>
35        );
36    }
37}

CSS
1//codemirror.cssの追加・変更した部分
2.react-codemirror2{
3  height:100%;
4  font-family: inherit;
5}
6
7.CodeMirror {
8  /* Set height, width, borders, and global font properties here */
9  font-family: inherit;
10  height: 100%;
11  color: black;
12  direction: ltr;
13}
14.CodeMirror-placeholder{
15  color: #777!important;
16}
17

CSS
1html {font-size: 62.5%;}
2
3body {font-family: 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Yu Gothic UI','メイリオ', Meiryo,sans-serif;
4         color: #333;
5         font-size: 1.6rem;
6        }
7
8        html,
9        body,
10        p,
11        ol,
12        ul,
13        li,
14        dl,
15        dt,
16        dd,
17        blockquote,
18        figure,
19        fieldset,
20        legend,
21        textarea,
22        pre,
23        iframe,
24        hr,
25        h1,
26        h2,
27        h3,
28        h4,
29        h5,
30        h6 {
31            margin: 0;
32            padding:0;
33        }
34
35        #app{
36            line-height: 1.7;
37        }

scss
1//style.scss
2body {
3  #app {
4    #body {
5      height: 100vh;
6      display: grid;
7      grid-template-columns: 1fr 1fr;
8      grid-template-rows: 1fr 9fr;
9      header {
10        position: relative;
11        background-color: #f8f8f8;
12        border: 1px solid #e7e7e7;
13        grid-row: 1/2;
14        grid-column: 1/3;
15        h1 {
16          position: absolute;
17          top: 50%;
18          left: 50%;
19          transform: translate(-50%, -50%);
20        }
21      }
22      #core {
23        grid-row: 2/3;
24        grid-column: 1/2;
25      }
26    }
27  }
28}

環境

"codemirror": "^5.45.0"
"react-codemirror2": "^5.1.0"
"react": "^16.8.6"
"react-dom": "^16.8.6"
"live server":"5.5.1"
"chrome":73.0.3683.86（Official Build）（64 ビット）
"webpack": "^4.29.6"
"@babel/core": "^7.4.0"
"@babel/preset-env": "^7.4.2"
"@babel/preset-react": "^7.0.0"
"babel-loader": "^8.0.5"