# React Markdown App, need advice to keep output on white background

**URL:** <https://forum.freecodecamp.org/t/react-markdown-app-need-advice-to-keep-output-on-white-background/249202>\
**Category:** General\
**Created:** [January 4, 2019, 1:19am UTC](https://forum.freecodecamp.org/t/react-markdown-app-need-advice-to-keep-output-on-white-background/249202 "2019-01-04T01:19:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fbattle](https://avatars.discourse-cdn.com/v4/letter/f/e95f7d/32.png) [@fbattle](https://forum.freecodecamp.org/u/fbattle)\
**Post date:** [January 4, 2019, 1:19am UTC](https://forum.freecodecamp.org/t/react-markdown-app-need-advice-to-keep-output-on-white-background/249202/1 "2019-01-04T01:19:55Z")

</div>

Please take a quick look at this webpage:  
[http://fbatdesign.xyz/markdownpreviewer/markdownpreviewer.html](http://fbatdesign.xyz/markdownpreviewer/markdownpreviewer.html)  
Notice how the output extends beyond the white box labelled Preview. I would like the Preview output to always be displayed against a white background. I created a div and gave it a size and border so that the output would be in it. But it appears the innerHTML is not bound by the div that surrounds it.

I would either like to make my preview box height match the output size, or I would like the output to be kept inside the current box with scrollbars.

Can someone suggest how I can do either of these? Thanks.

---

<div class="post-metadata">

**Author:** ![tkhquang](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tkhquang/32/107686_2.png) [@tkhquang](https://forum.freecodecamp.org/u/tkhquang)\
**Post date:** [January 4, 2019, 7:50am UTC](https://forum.freecodecamp.org/t/react-markdown-app-need-advice-to-keep-output-on-white-background/249202/2 "2019-01-04T07:50:07Z")

</div>

Add this to your stylesheet, this will add scrollbars on your Preview if there’s overflow.

```auto
.preview {
 overflow: auto;
}

```

---

<div class="post-metadata">

**Author:** ![fbattle](https://avatars.discourse-cdn.com/v4/letter/f/e95f7d/32.png) [@fbattle](https://forum.freecodecamp.org/u/fbattle)\
**Post date:** [January 4, 2019, 4:36pm UTC](https://forum.freecodecamp.org/t/react-markdown-app-need-advice-to-keep-output-on-white-background/249202/3 "2019-01-04T16:36:22Z")

</div>

Thank you. That one css property is exactly what I needed.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:06pm UTC](https://forum.freecodecamp.org/t/react-markdown-app-need-advice-to-keep-output-on-white-background/249202/4 "2021-01-17T20:06:37Z")

</div>