Need help for overflow-y:auto/ scrolling - html

Question

I just create this div function:
<div class="row">
<div class="col-sm-12">
<!--<img src="images/article_image.png" class="img-responsive" />-->
<?php //echo $wordRow['article_image']; ?>
<h2 class="black_color" style="font-size: 25px; font-style:italic ;margin-left:15px">
<?php echo $wordRow['article_name']; ?>
</h2>
<div class="black_color" style="margin-left:20px; margin-right:20px; overflow-y:auto;">
<?php echo $wordRow['article_description']; ?>
</div>
</div>
</div>
which gives me this white form , which is part of this editor. By that I'm able to create articles on my site. Unfortunalety I get the scrolling on the side if the text is longer. I try do add
overflow-y:auto;
but that doesn't work. Putting a max length for the text doesn't work either. Basicly what I'm trying to do is to put a scrolling inside the white article form and not on the left of the page. Any ideas?

Answer 1

You can set two overflow properties, overflow-x and overflow y
Set the overflow-y to scroll and overflow-x to hidden on the same div and then it'll work just as well
If you give your divs ids and classes you can avoid inline-style and use css stylesheets (a lot easier!)
for example on the outer div you could give id of outer, and the inner div, inner. Your css/style section would look like this (example). Externally linked in stylesheets are preferred/recommended
#outer{height:100%}
#inner{width: 98%;
color:#000000;
overflow-y:scroll;
overflow-x:hidden;
margin-left: 20px;
margin-right:20px;
}
h2{color:#000000;
font-size: 25px;
font-style:italic ;
margin-left:15px}

Answer 2

This helps too:
#outer {
height: 100%
overflow: hidden;
}
#inner {
width: 98.5%;
position: fixed;
overflow:auto;
bottom:23px;
top: 137.5px;
}
<div id="outer">
<div id="inner">
<h2 class="black_color" style="font-size: 25px; font-style:italic ;margin-left:15px"><?php echo $wordRow['article_name']; ?></h2>
<div class="black_color" style="margin-left:20px; margin-right:20px;"><?php echo $wordRow['article_description']; ?></div>
</div>
</div>
Either way is good.

Answer 3

This helped me pretty much.
<div style="height:100%; overflow:hidden">
<div style="width:98.5%; position: fixed; bottom:23px; top: 137.5px; overflow:auto">
<h2 class="black_color" style="font-size: 25px; font-style:italic ;margin-left:15px"><?php echo $wordRow['article_name']; ?>
</h2>
<div class="black_color" style="margin-left:20px; margin-right:20px;">
<?php echo $wordRow['article_description']; ?>
</div>
</div>
</div>
I now get the scrolling inside the form, like this and the whole page stays in place. So will the text stay inside the the white form.