@@ -0,0 +1 @@
+The native editor will now wrap all its content instead of showing a horizontal scrollbar.
@@ -448,8 +448,9 @@ export class Cell extends React.Component<ICellProps, ICellState> {
         // React-markdown expects that the source is a string
         const source = concatMultilineString(markdown.source);
         const Transform = transforms['text/markdown'];
+        const MarkdownClassName = 'markdown-cell-output';
 
-        return [<Transform key={0} data={source} />];
+        return [<div className={MarkdownClassName}><Transform key={0} data={source} /></div>];
     }
 
     // tslint:disable-next-line: max-func-body-length
 
@@ -46,9 +46,19 @@
     justify-self: right;
 }
 
+// make the width of the div be a bit less than the width of the window,
+// the 95 pixels removed account for the space the padding and controls
+// on the left take in the native Editor.
 .cell-output {
     margin-top: 5px;
     background: transparent;
+    width: calc(95vw - 95px);
+    overflow-x: scroll;
+}
+
+.markdown-cell-output {
+    width: calc(95vw - 95px);
+    overflow-x: scroll;
 }
 
 .cell-outer-editable {
@@ -195,3 +205,6 @@
     margin-right: 0px;
 }
 
+#content-panel-div {
+    overflow: hidden;
+}
@@ -65,10 +65,12 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
 
     public componentDidMount() {
         window.addEventListener('keydown', this.mainKeyDown);
+        window.addEventListener('resize', () => this.forceUpdate(), true);
     }
 
     public componentWillUnmount() {
         window.removeEventListener('keydown', this.mainKeyDown);
+        window.removeEventListener('resize', () => this.forceUpdate());
         // Dispose of our state controller so it stops listening
         this.stateController.dispose();
     }
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+The native editor will now wrap all its content instead of showing a horizontal scrollbar.`
Original file line number	Diff line number	Diff line change
`@@ -448,8 +448,9 @@ export class Cell extends React.Component<ICellProps, ICellState> {`
`448`	`448`	`// React-markdown expects that the source is a string`
`449`	`449`	`const source = concatMultilineString(markdown.source);`
`450`	`450`	`const Transform = transforms['text/markdown'];`
	`451`	`+ const MarkdownClassName = 'markdown-cell-output';`
`451`	`452`
`452`		`- return [<Transform key={0} data={source} />];`
	`453`	`+ return [<div className={MarkdownClassName}><Transform key={0} data={source} /></div>];`
`453`	`454`	`}`
`454`	`455`
`455`	`456`	`// tslint:disable-next-line: max-func-body-length`
Original file line number	Diff line number	Diff line change
`@@ -65,10 +65,12 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState`
`65`	`65`
`66`	`66`	`public componentDidMount() {`
`67`	`67`	`window.addEventListener('keydown', this.mainKeyDown);`
	`68`	`+ window.addEventListener('resize', () => this.forceUpdate(), true);`
`68`	`69`	`}`
`69`	`70`
`70`	`71`	`public componentWillUnmount() {`
`71`	`72`	`window.removeEventListener('keydown', this.mainKeyDown);`
	`73`	`+ window.removeEventListener('resize', () => this.forceUpdate());`
`72`	`74`	`// Dispose of our state controller so it stops listening`
`73`	`75`	`this.stateController.dispose();`
`74`	`76`	`}`