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

実現したいこと

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

発生している問題

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

関連するソースコード

//index.js
import ReactDOM from 'react-dom';
import App from './App.js';
import './style.scss';
import 'codemirror/theme/material.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/scroll/simplescrollbars.css';


ReactDOM.render(
    <App />,
    document.querySelector('#app')
);

//App.js
import React from 'react';
import Core from './components/core';
import MyHeader from './components/header';
export default class App extends React.Component {
    render(){
        return (<div id="body"><MyHeader /><Core /></div>);
    }
}

//header.js
import React from 'react';

export default class MyHeader extends React.Component {
    render(){
        return (
        <header>
            <h1>MarkDown Editor</h1>
        </header>);
    }
}

//core.js
import React from 'react';
import {Controlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/gfm/gfm';
import 'codemirror/addon/display/placeholder';
import 'codemirror/addon/scroll/simplescrollbars';

const options = {
    mode: 'gfm',
    theme:'material',
    lineNumbers:true,
    placeholder: 'Write Markdown here',
    lineWrapping: true,
    scrollbarstyle:'simple'
};

export default class Core extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            cmvalue:''
        };
    }
    render(){
        return (
        <div id="core">
            <CodeMirror options={options}
            value={this.state.cmvalue}
            onBeforeChange={(editor, data, cmvalue)=>{
                this.setState({cmvalue});
            }}
            onChange={(editor,data,value)=>{}} />
        </div>
        );
    }
}

//codemirror.cssの追加・変更した部分
.react-codemirror2{
  height:100%;
  font-family: inherit;
}

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: inherit;
  height: 100%;
  color: black;
  direction: ltr;
}
.CodeMirror-placeholder{
  color: #777!important;
}

html {font-size: 62.5%;}

body {font-family: 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Yu Gothic UI','メイリオ', Meiryo,sans-serif;
         color: #333;
         font-size: 1.6rem;
        }

        html,
        body,
        p,
        ol,
        ul,
        li,
        dl,
        dt,
        dd,
        blockquote,
        figure,
        fieldset,
        legend,
        textarea,
        pre,
        iframe,
        hr,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
            padding:0;
        }

        #app{
            line-height: 1.7;
        }

//style.scss
body {
  #app {
    #body {
      height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 9fr;
      header {
        position: relative;
        background-color: #f8f8f8;
        border: 1px solid #e7e7e7;
        grid-row: 1/2;
        grid-column: 1/3;
        h1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      #core {
        grid-row: 2/3;
        grid-column: 1/2;
      }
    }
  }
}

環境

"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"